通用倒计时写法

2018-10-27  本文已影响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("时间到了");

    }

  }}

}
上一篇下一篇

猜你喜欢

热点阅读