起因

有一个朋友是一名小学教师,让我帮忙找一个可以计时的代码来给小朋友阅读进行计时。
百度了一圈之后竟然没有找到一个满意的页面,不是太复杂就是倒计时,不知道是不是因为太简单所以每人分享。
既然找不到那就自己花一点时间写一个吧,也不会费多少事。
聊天记录

源码

使用方法:创建time.txt,粘贴如下代码,然后将txt改成html就行了。最终文件是:time.html
可以参考这个:用文本编译器创建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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计时器</title>
<style>
body {
background-image: url(c2c0290959ac485294838a7bda566c6b.jpg);
background-size: cover;
background-position: center;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}

.mainBox {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 800px;
padding: 30px 30px 50px;
width: 70%;
height: 40vh;
background: rgba(255, 255, 255, .8);
border-radius: 20px;
box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

#time {
color: #333;
margin-bottom: 50px;
text-align: center;
font-size: 8rem;
}

#btns {
display: flex;
justify-content: center;
}

#btns button {
cursor: pointer;
margin: 0 10px;
height: 50px;
width: 25%;
border-radius: 15px;
font-size: 1.5rem;
letter-spacing: 10px;
color: white;
background: #ff9966;
background: -webkit-linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98));
background: linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98));
border: 0;
}

#btns button:not(:first-child) {
display: none;
}
</style>
</head>

<body>
<div class="mainBox">
<div id="time">
<span>00</span>:
<span>00</span>:
<span>00</span>
</div>
<div id="btns">
<button onclick="begin()">开始</button>
<button onclick="cont()">继续</button>
<button onclick="pause()">暂停</button>
<button onclick="reset()">重置</button>
</div>
</div>
<script>
let initTime = passTime = t = null,
btns = document.getElementById('btns'),
tBox = document.getElementById('time')

function begin() {
initTime = new Date().getTime();
t = setInterval(timer, 1000);
btns.children[0].style.display = 'none'
btns.children[2].style.display = 'block'
btns.children[3].style.display = 'block'
}

function cont() {
initTime = new Date().getTime() - passTime
t = setInterval(timer, 1000);
btns.children[2].style.display = 'block'
btns.children[1].style.display = 'none'

}

function pause() {
passTime = new Date().getTime() - initTime;
clearInterval(t)
t = null
btns.children[1].style.display = 'block'
btns.children[2].style.display = 'none'
}

function reset() {
clearInterval(t)
t = null
btns.children[0].style.display = 'block'
btns.children[1].style.display = 'none'
btns.children[2].style.display = 'none'
btns.children[3].style.display = 'none'

tBox.children[0].innerHTML = '00'
tBox.children[1].innerHTML = '00'
tBox.children[2].innerHTML = '00'
}

function nol(h) {
return h > 9 ? h : '0' + h
}

function timer() {
let second = Math.floor((new Date().getTime() - initTime) / 1000)
if (second >= 3600) {
tBox.children[0].innerHTML = nol(parseInt(second / 3600));
second %= 3600;
}
if (second >= 60) {
tBox.children[1].innerHTML = nol(parseInt(second / 60));
second %= 60;
}
if (second >= 0) tBox.children[2].innerHTML = nol(second);
}
</script>
</body>

</html>

效果图

为了方便,我没有添加背景图,直接用的纯色背景(图一)
其实加上背景图效果会好一些(图二图三)

后记

不得不说,这种简单的单页有时用处还是很大的。
例如:学校没网且电脑性能不足或者关机自动清除数据,将页面装在U盘里随时使用。