美文网首页
通用倒计时写法

通用倒计时写法

作者: 蜗牛和曼巴 | 来源:发表于2018-10-27 14:07 被阅读0次

    html部分

    <div>
    <span>0</span>
    <span>0</span>
    <span>:</span>
    <span>0</span>
    <span>0</span>
    <span>:</span>
    <span>0</span>
    <span>0</span>
    </div>
    

    js部分

    window.onload=function () {
    
      timeGo();
    
      // 倒计时
    
    function timeGo() {
    
      // 要到计的总时间 - 单位 s 秒
    
      var time = 10000;
    
      // 获取时间标签
    
      var spans = document.querySelectorAll(".time>span");
    
      setTimeHtml();
    
      // 开启定时器 time--
    
      var timeId = setInterval(function () {
    
        time--;
    
        setTimeHtml();
    
      }, 1000);
    
      function setTimeHtml() {
    
        // 获取小时
    
        var hour = parseInt(time / 60 / 60);
    
        // 获取分钟
    
        var mins = parseInt(time / 60 - hour * 60);
    
        // 秒
    
        var seconds = time - hour * 60 * 60 - mins * 60;
    
        // 4:5:10  04:05:10
    
        // if 数组做判断 。。。。。
    
        // 4/10=0.4  14/10=1.4
    
        var hour0 = parseInt(hour / 10);
    
        var hour1 = hour % 10;
    
        // 分钟
    
        var mins0 = parseInt(mins / 10);
    
        var mins1 = mins % 10;
    
        // 秒
    
        var seconds0 = parseInt(seconds / 10);
    
        var seconds1 = seconds % 10;
    
        // console.log(hour0, hour1, mins0, mins1, seconds0, seconds1);
    
        spans[0].innerHTML = hour0;
    
        spans[1].innerHTML = hour1;
    
        spans[3].innerHTML = mins0;
    
        spans[4].innerHTML = mins1;
    
        spans[6].innerHTML = seconds0;
    
        spans[7].innerHTML = seconds1;
    
        // 是否到时间了
    
        if (time == 0) {
    
          clearInterval(timeId);
    
          console.log("时间到了");
    
        }
    
      }}
    
    }
    

    相关文章

      网友评论

          本文标题:通用倒计时写法

          本文链接:https://www.haomeiwen.com/subject/imldtqtx.html