利用setInterval制作网页计时器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用setInterval制作网页计时器相关的知识，希望对你有一定的参考价值。
在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 function fun1() { 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制作网页计时器的主要内容，如果未能解决你的问题，请参考以下文章
HTML5制作扑克翻牌游戏（送《HTML5 网页游戏设计从基础到开发》）