js倒计时原理

内容摘要
这篇文章主要为大家详细介绍了js倒计时原理的简单示例,具有一定的参考价值,可以用来参考一下。对此感兴趣的朋友,看看idc笔记做的技术笔记。倒计时经常会在项目中或者电商类
文章正文

这篇文章主要为大家详细介绍了js倒计时原理的简单示例,具有一定的参考价值,可以用来参考一下。

对此感兴趣的朋友,看看idc笔记做的技术笔记。
倒计时经常会在项目中或者电商类网站比如团购或者拼单等等中会有出现,
今天就了解一下它的原理,然后写一个简单的倒计时例子。
其实关于倒计时原理很简单:就是用未来的时间减去去现在的时间然后换算即可。
(未来的时间点(不变)减现在的时间点(在变))。来看简单的例子:计算一下距离今年五一还有多长时间?
直接来看代码:
布局:
<span>距离2018年5月1日还有多长时间?</span><p id="time"></p>
那么js代码: JS代码如下:
/**
 * 倒计时
 *
 * @param 
 * @arrange (www.idcnote.com)
 **/
<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
就是这些,好了,你也可以设定一个未来时间来计算一下了。这就是简单的倒计时原理!

注:关于js倒计时原理的简单示例的内容就先介绍到这里,更多相关文章的可以留意

代码注释

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!