利用setInterval制作網頁計時器
阿新 • • 發佈：2017-07-29
one log div -- har fin 內容 jquery put
在javascript中利用 setInterval clearInterval定時 方法去控制顯示時間的增加
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>頁面時鐘</title> 7 <script type="text/javascript" src="js/jquery-3.2.1.js"></script> 8 </head> 9 10 <body> 11 <!--<input type="button" id="button1"value="OK" /> 12 <img src="img/00000.jpg" />--> 13 <!--添加一個文本框顯示時間，兩個按鈕去控制時間的開始和暫停--> 14 <input type="text" size="30" id="one" /><br /> 15 <input type="button" id="two"value="開始" onclick="fun1()" /> 16 <input type="button" id="three" value="結束" onclick="fun2()" /> 17 18 </body> 19 20 </html> 21 <script type="text/javascript"> 22 //控制文本框中的內容 23 // document.getElementById("one").value="123"; 24 var id; 25 26 functionfun1() { 27 //確保只打開一個定時器 28 setTime(); 29 30 if(!id) { 31 32 id = window.setInterval(setTime, 1000); 33 } 34 } 35 36 function setTime() { 37 var date = new Date(); 38 document.getElementById("one").value = date.toLocaleString(); 39 } 40 //停止時鐘 41 function fun2() { 42 43 clearInterval(id); 44 id = undefined; 45 } 46 </script>
利用setInterval制作網頁計時器