开发者学堂课程【移动 Web 前端开发:js 功能-倒计时】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8427
js功能-倒计时
内容介绍
一、js 功能-倒计时
1、页面倒计时代码设置
2、倒计时时间
3、如何把时间展示在框中,是需要格式化时间的
上节课已经学习了轮播图,通过轮播图,学习了 tap 事件,也包括轮播图的滑动端效果如何实现的;了解到移动端常见的手势事件和原理。
为了提高在服务器的响应速率,有以下两种方法:一是使用 tap;二是 down Time。
1、页面倒计时代码设置:
var down Time = function(){
模拟倒计时的时间是11个小时
利用定时器(每隔1秒一次重新展示时间)
var time = 60*60*11;
2、倒计时时间(如图)
var sk Time = docu ment .query selector( ' .sk_ time " ) ;
var spans = sk Time .query selector All( 'span' ) ;
var timer = setIn ter val(function(){
time --;
3、如何把时间展示在框中,是需要格式化时间的
(1)格式化时间
var h = Math. floor(time / 3600);
(未满一小时,是放在分钟或秒数上的
)
var m = Math. floor(time%3600/60);(
假设有3
800
秒,除以一小时还剩
200
秒,这2
00
秒要换成分钟)
var s = time%60;
(2)设置时间
(接格式化之后要设置时间)
spans[o].inner HTML = Math .floor(h/10);
spans[1].inner HTML = h%10;
spans[3].inner HTML = Math. floor(m/10);
spans[4].inner HTML = m%10;
spans[6].inner HTML = Math. floor(s/10);
spans[7].inner HTML =
s
%10;
判断当前时间是否小于零或等于零,那么定时器会把时间给清掉
if(time <= o)
{
clear Interval(timer);
}
测试结果代码无误。