利用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>

 

posted @ 2017-07-29 09:51  小白不会main  阅读(249)  评论(0)    收藏  举报