定时器简单应用介绍_定时器有以下几种应用:-CSDN博客

本文链接：https://blog.csdn.net/weixin_45105458/article/details/97818378

第一种：炸弹定时器：setTimeout（）间隔时间后执行（一次）：
在指定的毫秒数后调用函数或计算表达式。
clearTimeout（）清除计时器
案例：获取验证码倒计时

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <button id="but" onclick="time()">获取验证码</button>
  <script type="text/javascript">
   var num=5;              //5秒倒计时
   function time(){
    num--;              //自减
    but.innerHTML=num+'s获取验证码';
    var time1=setTimeout('time()',1000);      //定时器
    if (num<=0) {                             //小于等于零时停止定时器
     clearTimeout(time1);
     but.innerHTML='获取验证码'              //返回原来样式
     num=5;
    }
    
   }
  </script>
 </body>
</html>

第二种：循环定时器：setInterval()不停止一直执行
按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
clearInterval()清除循环定时器
案例：打字机

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <!--打字机
  第一步：创建页面结构
  第二步：获取页面元素
  第三步：创建数组
  第四步：给数组添加定时器-->
 </head>
 <body onload="dazi();">
  <div id="id" style="float: left; font-family: '新宋体'; font-size: 23px;"></div>
  <span id="sp"><label style="color: #0000FF; font-size: 23px;">|</label></span>
  <script type="text/javascript">
   var a=0;
   function dazi(){
    var arr=['我','是','打','字','机','！']
    var div=document.getElementById('id');//获取div
    div.innerHTML+=arr[a];                //把数组放在div中
    a++;
    var time=setTimeout('dazi()',500)      //添加定时器
    if (a>=arr.length) {                    //超过数组长度时停止计时器
     clearTimeout(time)
     setInterval('heng()',300);
    }
   }
   function heng(){                             //数字后面的“|”
    var span=document.getElementById('sp');
    if (span.style.display=='block') {
     span.style.display='none'
    } else{
     span.style.display='block'
    }
   }
  </script>
 </body>
</html>

倒计时晋级版：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="div1"></div>
  <script type="text/javascript">
   
    function pi(){
     var oD = document.getElementById('div1');
     var now = new Date();//提取当天日期
           var future = new Date(2030,5,12,24,0,0);
           var now1 = now.getTime();//现在时间
           var future1 = future.getTime();//未来时间
           var cha = ((future1 - now1)/1000);// 现在到未来年数
                 var tian = parseInt(cha/(60*60*24)); //现在到未来天数
                 var shi = parseInt((cha/(60*60))%24);//现在到未来小时数
                 var min = parseInt((cha/60)%60);//现在到未来分数
                 var sec = parseInt(cha%60);//现在到未来秒数
                 str='距离2030年5月12日晚24点还剩下'+tian+'天'+shi+'时'+min+'分'+sec+'秒';
           oD.innerHTML = str;
    }
           setInterval(pi,1000);
   
  </script>
 </body>
</html>