• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
麦兜家园
优秀是一种习惯
博客园    首页    新随笔    联系   管理    订阅  订阅
原生js关于倒计时的原理

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

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

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

直接来看代码:

布局:

<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

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

 

posted on 2018-01-01 21:54  麦兜家园  阅读(1369)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3