zoukankan      html  css  js  c++  java
  • 原生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

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

  • 相关阅读:
    vue中在echarts tooltip中添加点击事件
    支配树
    mac安装protobuf
    mac安装 thrift
    Javascript设计模式读书笔记二 接口
    WebBrowser捕获网页关闭事件
    谈谈UserControl调用页面的几种方法
    屏蔽刷新提交后台
    [喜讯]Acey.ExcelX组件已发布在componentsource
    AceyOffice教程如何判断单元格的内容
  • 原文地址:https://www.cnblogs.com/web001/p/8169073.html
Copyright © 2011-2022 走看看