定时器

body样式

 <span class="hours">00</span>

  <span class="line">:</span>

  <span class="minutes">00</span>

  <span class="line">:</span>

  <span class="seconds">00</span>

  <!-- 引入公共的js文件 -->

  <script src="public.js"></script>

  <!-- 自定的义 -->

  <script>

    // 获取元素

    var hours = document.querySelector('.hours');

    var minutes = document.querySelector('.minutes');

    var seconds = document.querySelector('.seconds');

    // 抽出定时器函数

    var fn = function () {

      // 开始时间

      var s = new Date();

      // 结束时间

      var e = new Date(2019, 3, 18, 18, 27, 40);

      // 计算时间差

      var timeObj = getDiff(s, e);

      if (timeObj.temp <= 0) {

        // 停止定时器

        clearInterval(flag);

        hours.innerText = '00';

        minutes.innerText = '00';

        seconds.innerText = '00';

      } else {

        // 设置显示倒计时元素的内容

        hours.innerText = timeObj.xiaoShi;

        minutes.innerText = timeObj.fenZhong;

        seconds.innerText = timeObj.miao;

      }

    }

    // 先调用一次

    fn();

    // 创建一个定时器

    var flag = setInterval(fn, 1000);

  </script>

 

 

public.js

/*

  功能：计算两个日期的时间差

  参数：

    start 开始时间对象

    end 结束时间对象

*/

function getDiff(start, end) {

  // 总毫秒差

  var temp = end - start;

  // 小时

  var hours = parseInt(temp / 1000 / 60 / 60);

  hours = hours < 10 ? '0' + hours : hours;

  // 分钟

  var minutes = parseInt(temp / 1000 / 60 % 60);

  minutes = minutes < 10 ? '0' + minutes : minutes;

  // 秒

  var seconds = parseInt(temp / 1000 % 60);

  seconds = seconds < 10 ? '0' + seconds : seconds;

  // 返回多个值

  return {xiaoShi:hours,fenZhong:minutes,miao:seconds,temp:temp};

}