原生javascript实现计时器

成品图如意下所示:

实现加到等于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);

谢谢观看,有大佬路过指点指点意见

猜你喜欢

转载自www.cnblogs.com/yangpeixian/p/10777660.html