900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > JavaScript计时器实现倒计时效果

JavaScript计时器实现倒计时效果

时间:2020-05-07 14:08:54

相关推荐

JavaScript计时器实现倒计时效果

1.计时器:

描述:window中提供了两种计时器,即延迟期和定时器

语法:

1) 定时器:

创建定时器:var timer = setInterval(function () {...},ms);

删除定时器:clearlnterval ( timer );

2) 延迟期:

创建延迟器:var timer = setTimeout(function(){...},ms);

删除延迟器:clearTimeout( timer );

本质:定时器的本质实际上是【系统时钟插槽的序号】,我们无法直接操作定时器本身

特征:计时器的计时操作都是发生在【代码执行完毕之后】

2.JavaScript计时器实现倒计时效果:

//1.1 创建一个空字符串:用于结束存放倒计时var $str = "";//1.2 创建结束时间var $end$date = `-1-18 20:00:00`;//1.3 创建一个倒计时函数_djs_fn = (_str,_end_date)=>{//1.3.1 获取结束时间var _end_time = new Date(_end_date);//1.3.2 获取当前时间var _datetime = new Date();//1.3.3 计算倒计总秒数var _total_s = parseInt((_end_time-_datetime)/1000);//1.3.4 计算倒计天数var _day = Math.floor(_total_s/(60*60*24));//1.3.5 取余(算倒计时小时数)var _modulo = _total_s % (60*60*24);//1.3.6 计算倒计小时var _hs = Math.floor(_modulo/(60*60));//1.3.7 取余(算倒计时分钟数)_modulo = _modulo %(60*60);//1.3.8 计算倒计分钟var _min =Math.floor(_modulo / 60);//1.3.9 计算倒计秒数var _s = _modulo % 60;//1.3.10 将计算出的倒计时传给空字符_str = `距离${_end_date}还有:${_day}天${_hs}小时${_min}分钟${_s}秒`;document.body.innerHTML =_str;//1.3.11 创建延迟器var timer = setTimeout(() => {//1.3.12 函数自身调用自身_djs_fn(_str,_end_date);}, 1000);//1.3.13 判断倒计时总秒数if (_total_s == 0) {//1.3.14 倒计时总秒数为0就删除延迟器clearTimeout(timer);}}//1.3.15 调用倒计时函数_djs_fn($str,$end$date);

效果图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。