JS小练习之实现一个计时器（开始，暂停，重置）

162 阅读 0 评论 107 点赞

我是靠谱客的博主整齐手链，这篇文章主要介绍JS小练习之实现一个计时器（开始，暂停，重置），现在分享给大家，希望可以做个参考。

复制代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>一个计时器</title>
    <style>
      #mytime{
        background: #bbb;
        color: #fff;
        display: block;
      }
      .wrapper{
        text-align: center;
        width: 60%;
        margin: 250px auto;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
    <h1 id=mytime>显示时间</h1>
    
    <button id="stop" name="button" οnclick="stop()">stop</button>
    <button id="start" name="button" οnclick="start()">start</button>
    <button id="reset" name="button" οnclick="reset()">reset</button>
    </div>
  </body>
   <script type="text/javascript">
   var h=m=s=ms= 0;  //定义时，分，秒，毫秒并初始化为0；
   var time=0;

function reset(){  //重置
     clearInterval(time);
     h=m=s=ms=0;
     document.getElementById('mytime').innerHTML="00时00分00秒0000毫秒";
   }

function start(){  //开始
     time=setInterval(timer,50);
   }

function stop(){  //暂停
     clearInterval(time);
   }

function toDub(n){  //补0操作
     if(n<10){
       return "0"+n;
     }
     else {
       return ""+n;
     }
   }

function toDubms(n){  //给毫秒补0操作
     if(n<10){
       return "00"+n;
     }
     else {
       return "0"+n;
     }

}

</script>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>一个计时器</title>
    <style>
      #mytime{
        background: #bbb;
        color: #fff;
        display: block;
      }
      .wrapper{
        text-align: center;
        width: 60%;
        margin: 250px auto;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
    <h1 id=mytime>显示时间</h1>
    <!-- <input id="mytime" type="text" name="" value="显示时间"> -->
    <button id="stop" name="button" οnclick="stop()">stop</button>
    <button id="start" name="button" οnclick="start()">start</button>
    <button id="reset" name="button" οnclick="reset()">reset</button>
    </div>
  </body>
   <script type="text/javascript">
   var h=m=s=ms= 0;  //定义时，分，秒，毫秒并初始化为0；
   var time=0;

   function timer(){   //定义计时函数
     ms=ms+50;         //毫秒
     if(ms>=1000){
       ms=0;
       s=s+1;         //秒
     }
     if(s>=60){
       s=0;
       m=m+1;        //分钟
     }
     if(m>=60){
       m=0;
       h=h+1;        //小时
     }
     str =toDub(h)+"时"+toDub(m)+"分"+toDub(s)+"秒"+toDubms(ms)+"毫秒";
     mytime = document.getElementById('mytime');
     mytime.innerHTML = str;
   // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
   }

   function reset(){  //重置
     clearInterval(time);
     h=m=s=ms=0;
     document.getElementById('mytime').innerHTML="00时00分00秒0000毫秒";
   }

   function start(){  //开始
     time=setInterval(timer,50);
   }

   function stop(){  //暂停
     clearInterval(time);
   }

   function toDub(n){  //补0操作
     if(n<10){
       return "0"+n;
     }
     else {
       return ""+n;
     }
   }

   function toDubms(n){  //给毫秒补0操作
     if(n<10){
       return "00"+n;
     }
     else {
       return "0"+n;
     }

   }

   </script>

</html>