js简版定时器

最新推荐文章于 2025-06-19 15:19:40 发布

weixin_33714884

最新推荐文章于 2025-06-19 15:19:40 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tmrgd/p/5787715.html

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个基本的动态计数器功能。通过设置定时器，页面上的数字每秒自动递增，并提供了开始和结束按钮来控制计数过程。

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>定时器</title>
 5 <style type='text/css'>
 6 #box {width:80px; height:80px; background:#f00; position:absolute; left:50px; top:50px;}
 7 </style>
 8 <script>
 9        var $time;
10          function $(id){
11              return document.getElementById(id);
12           }
13           function start(){
14              $("span").innerHTML=parseInt($("span").innerHTML)+1;
15              $time=setTimeout('start()',1000);
16           }
17     window.onload = function() {
18          $("start").onclick=function(){
19                 start();
20              }
21              $("end").onclick=function(){
22                //取消定时器
23                 clearTimeout($time);
24                 $("span").innerHTML=1;
25              }
26       }
27 </script>
28 </head>
29 <body>
30 <span id="span">1</span><br/>
31 <input type="button" id="start" value="开始" /><br/>
32 <input type="button" id="end" value="结束" /><br/>
33 </body>
34 </html>