JavaScript 之 定时器

　　JavaScript 里面有两个定时器：setTimeout() 和 setInterval() 。

　　区别：

　　　　setTimeout()：相当于一个定时炸弹，隔一段时间执行，并且只会执行一次就不在执行了。

　　　　setInterval()： 相当于一个闹钟，隔一段时间执行，并且会重复执行。

一、setTimeout()

　　1、设置定时器（倒计时）

　　　　语法格式：

setTimeout(function() {},时间)；

　　　　    这个函数需要两个参数：

　　　　　　第一个参数是到时间后需要执行的函数，可以是匿名函数，也可以是命名函数；

　　　　　　第二个参数是时间间隔，单位为毫秒（ms）。

　　　　Demo：

 btn.onclick = function() {
   setTimeout(function(){
        alert("hello world");
     },3000);
 }    

　　　　当点击按钮3秒后，页面弹出 “hello world” 的对话框。

　　2、取消定时器（倒计时）

　　　　语法格式：

var  timerId = setTimeout(function(){}, 时间间隔);
clearTimeout(timerId);

　　　　声明定时器时会有一个返回值，是一个整数，即当前这个定时器的 标识。

　　　  在执行 clearTimeout() 这个函数时，在里面传入对应的 定时器的标识 即可取消当前的定时器。

二、setInterval()

　　1、设置定时器

　　　　语法格式：

setInterval(function(){},时间间隔);

　　　　　这个函数需要两个参数：

　　　　　　第一个参数是到时间后需要执行的函数，可以是匿名函数，也可以是命名函数；

　　　　　　第二个参数是时间间隔，单位为毫秒（ms）。

　　2、取消定时器

　　　　　语法格式：

var  timerId = setInterval(function(){}, 时间间隔);
clearInterval(timerId);

　　　　  声明定时器时会有一个返回值，是一个整数，即当前这个定时器的 标识。

　　　  在执行 clearTimeout() 这个函数时，在里面传入对应的 定时器的标识 即可取消当前的定时器。

　　  Demo：距离2019年11月11日倒计时

  // 结构
  <h1 class="title">距离光棍节，还有</h1>

   <div class="time-item">
     <span><span id="day">00</span>天</span>
     <strong><span id="hour">00</span>时</strong>
     <strong><span id="minute">00</span>分</strong>
     <strong><span id="second">00</span>秒</strong>
   </div>

 <script>
     // 目标时间
     var endDate = new Date('2019-11-11 0:0:0');
     // 获取 span
     var spanDay = document.getElementById('day');
     var spanHour = document.getElementById('hour');
     var spanMinute = document.getElementById('minute');
     var spanSecond = document.getElementById('second');

     countdown();
     setInterval(countdown, 1000);

     // 倒计时
     function countdown() {

       // 计算时间差
       // 当前时间
       var startDate = new Date();
       // 计算两个日期差
       var interval = getInterval(startDate, endDate);

       setInnerText(spanDay, interval.day);
       setInnerText(spanHour, interval.hour);
       setInnerText(spanMinute, interval.minute);
       setInnerText(spanSecond, interval.second);

     }

  // 获取两个日期的时间差
 function getInterval(start, end) {
   // 两个日期对象，相差的毫秒数
   var interval = end - start;
   // 求 相差的天数/小时数/分钟数/秒数
   var day, hour, minute, second;

   // 两个日期对象，相差的秒数
   // interval = interval / 1000;
   interval /= 1000;

   day = Math.round(interval / 60 / 60 / 24);
   hour = Math.round(interval / 60 / 60 % 24);
   minute = Math.round(interval / 60 % 60);
   second = Math.round(interval % 60);

   return {
     day: day,
     hour: hour,
     minute: minute,
     second: second
   }
 }

 </script>