原生javascript实现计时器

yangpeixian 2021-09-01 原文

成品图如意下所示：

实现加到等于5的时候停止

搭建HTML结构

1 minutes:<input type="text" value="0">
2 seconds:<input type="text" value="0">

开始写javascript代码

 1 　　　　　　  var minutesNode = document.getElementsByTagName(\'input\')[0]; 
 2             var secondsNode = document.getElementsByTagName(\'input\')[1];
 3             var minutes = 0,  //设置两个初始值为0
 4                 seconds = 0; 
 5 
 6             var timer = setInterval(function(){       //开启定时器
 7                 seconds ++;                              //seconds每10毫秒加1
 8                 if(seconds == 60){                    //当seconds一直增加到等于60的时候
 9                     seconds = 0;                      //seconds清空等于0
10                     minutes ++;                        //然后miutes加上1
11                 }
12                 secondsNode.value = seconds;        //secods == secondsNode里面的value
13                 minutesNode.value = minutes;        //minutes == minutesNode里面的value
14                 if(minutes == 5){                    //当minutes一直增加到等于5的时候
15                     clearInterval(timer);            //清理定时器，停止运行！！！
16                 }
17             },10);