不懂什么是小程序_js定时器完成倒计时效果

js定时器实现倒计时效果       这篇文章主要为大家详细介绍了js定时器实现倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下

日期函数

倒计时 =  用 将来的时间  -  现在的时间 

问题:将来时间 距离 1970 毫秒数  -  现在距离 1970年1 

用将来的毫秒数 -  现在的毫秒数  不断转换就可以了

 !DOCTYPE html 
 html 
 head lang="en" 
 meta charset="UTF-8" 
 title /title 
 style 
 body{
 font-size:30px;
 text-align: center;
 color:red;
 /style 
 script 
 window.onload = function(){
 var demo = document.getElementById("demo");
 var endTime = new Date("2017/11/12 "); // 最终时间
 setInterval(clock,1000); // 开启定时器
 function clock(){
 var nowTime = new Date(); // 一定是要获取最新的时间
 // console.log(nowTime.getTime()); 获得自己的毫秒
 var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
 // 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整
 // console.log(second);
 // 一小时 3600 秒
 // second / 3600 一共的小时数 /24 天数
 var d = parseInt(second / 3600 / 24); //天数
 //console.log(d);
 var h = parseInt(second / 3600 % 24) // 小时
 // console.log(h);
 var m = parseInt(second / 60 );
 //console.log(m);
 var s = parseInt(second ); // 当前的秒
 console.log(s);
 /* if(d 10)
 d = "0" + d;
 d 10 d="0"+d : d;
 h 10 h="0"+h : h;
 m 10 m="0"+m : m;
 s 10 s="0"+s : s;
 demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";
 /script 
 /head 
 body 
 div id="demo" /div 
 /body 
 /html 

更多内容请参考:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://zzjzptp.cn/ziyuan/3347.html