倒计时原理与实现-优快云博客

倒计时经常会在项目中或者电商类网站比如团购或者拼单等等中会有出现，今天就了解一下它的原理，然后写一个简单的倒计时例子。

其实关于倒计时原理很简单：就是用未来的时间减去去现在的时间然后换算即可。（未来的时间点（不变）减现在的时间点（在变））。

来看简单的例子：计算一下距离今年五一还有多长时间？

直接来看代码：

布局：

<span>距离2018年5月1日还有多长时间？</span>
<p id="time"></p>

那么js代码：

<script>
   window.onload=function(){
       var oP=document.getElementById("time");
       var iNow=new Date();
       var iNew=new Date('May 1,2018 0:0:0');// 这个为字符串写法，数字形式是：new Date( 2018,4,1,0,0,0 )，注意就是月份数字是从0开始的
       var time=Math.floor((iNew - iNow)/1000);//毫秒转为秒
       oP.innerHTML=Math.floor(time/86400)+'天'+Math.floor(time%86400/3600)+'时'+Math.floor(time%86400%3600/60)+'分'+time%60+'秒';
   };

</script>

这样结果就出来了。还有需要记住的固定公式有：

//下面即为具体算法公式关于时分秒以及天,下面的t即为未来时间减现在时间的一个差
 天：Math.floor(t/86400)
 时：Math.floor(t%86400/3600)
 分：Math.floor(t%86400%3600/60)
 秒：t%60

就是这些，好了，你也可以设定一个未来时间来计算一下了。这就是简单的倒计时原理！

转载于:https://www.cnblogs.com/web001/p/8169073.html

原生js关于倒计时的原理