原生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);

謝謝觀看,有大佬路過指點指點意見

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM