本文實例為大家分享了JS實現秒表計時器的具體代碼，供大家參考，具體內容如下
秒表計時器的實現：
效果圖如下：
附代碼，已調試運行
|
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
88
89
90
91
92
93
94
95
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1 { width: 300px; height: 400px; background: skyblue; margin: 100px auto; text-align: center; } #count { width: 200px; height: 150px; line-height: 150px; margin: auto; font-size: 40px; } #div1 input { width: 150px; height: 40px; background: orange; font-size: 25px; margin-top: 20px } </style></head><body> <div id="div1"> <div id="count"> <span id="id_H">00</span> <span id="id_M">00</span> <span id="id_S">00</span> </div> <input id="start" type="button" value="開始"> <input id="pause" type="button" value="暫停"> <input id="stop" type="button" value="停止"> </div> <script> //可以將查找標簽節點的操作進行簡化 var btn = getElementById('btn') function $(id) { return document.getElementById(id) } window.onload = function() { //點擊開始建 開始計數 var count = 0 var timer = null //timer變量記錄定時器setInterval的返回值 $("start").onclick = function() { timer = setInterval(function() { count++; console.log(count) // 需要改變頁面上時分秒的值 console.log($("id_S")) $("id_S").innerHTML = showNum(count % 60) $("id_M").innerHTML = showNum(parseInt(count / 60) % 60) $("id_H").innerHTML = showNum(parseInt(count / 60 / 60)) }, 1000) } $("pause").onclick = function() { //取消定時器 clearInterval(timer) } //停止記數 數據清零 頁面展示數據清零 $("stop").onclick = function() { //取消定時器 $("pause").onclick() // clearInterval(timer) //數據清零 總秒數清零 count = 0 //頁面展示數據清零 $("id_S").innerHTML = "00" $("id_M").innerHTML = "00" $("id_H").innerHTML = "00" } //封裝一個處理單位數字的函數 function showNum(num) { if (num < 10) { return '0' + num } return num } } </script></body></html> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/gao000000/article/details/89099975
