计时器，时钟，秒表，倒计时

125 阅读 0 评论 83 点赞

我是靠谱客的博主犹豫面包，这篇文章主要介绍计时器，时钟，秒表，倒计时，现在分享给大家，希望可以做个参考。

定时器

- 在js中定时器有两种
- 关闭计时器
- 小时钟
- 秒表
- 倒计时

在js中定时器有两种

1、setInterval()

格式：var 变量名 = setInterval(“执行的语句”,每隔多久执行一次);

【注意】可以写执行的代码，也可以直接传入函数。

返回值：启动定时器时，系统分配的编号

2、setTimeout（）

只在指定时间后执行一次。

关闭：clearTimeout();

【注意】 clearTimeout函数需要一个参数：定时器的编号。

关闭计时器

关闭定时器的方式：

1.关闭页面。

2.clearInterval();

【注意】 clearInterval函数需要一个参数：定时器的编号。

小时钟

复制代码

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
function showTime(d) {
// 获取年
var year = d.getFullYear();
// 获取月
var month = d.getMonth()+1;
// 获取日
var date = d.getDate();
// 小时数
var hours = d.getHours();
// 获取分钟数
var m = d.getMinutes();
// 获取秒数
var seconds = d.getSeconds();
// 获取星期几
var day = d.getDay();
var str = year + "年" + doubleNum(month) +"月"+doubleNum(date)+"日
星期"+num2Chinese(day)+" "+hours+":"+m+":"+seconds;
return str;
}
// 数字转中文
function num2Chinese(num) {
var arr = ["日","一","二","三","四","五","六"];
return arr[num];
}
// 给小于10的前面补0
function doubleNum(n) {
if(n<10){
return "0"+n;
}else{
return n
}
}

秒表

html代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <div class="box">
<div id="showTime">
<span>00</span>
<span>:</span>
<span>00</span>
<span>:</span>
<span>00</span>
</div>
<div class="bnt">
<button id="resetBtn">复位</button>
<button id="startBtn">开始</button>
</div>
</div>

css代码

复制代码

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

* {
margin: 0;
padding: 0;
}
.box {
margin: 10px auto;
width: 400px;
}
span {
font-size: 60px;
}
button {
width: 100px;
height: 100px;
border-radius: 50px;
font-size: 24px;
margin: 0 48px;
border: 0;
outline: none;
cursor: pointer;
}
#showTime {
text-align: center;
margin-bottom: 20px;
}

JavaScript代码

复制代码

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
 window.onload = function() {
var min = 0;
var s = 0;
var ms = 0;
var time1;
var spans = document.getElementsByTagName('span');
// 复位
$('button')[0].onclick = function() {
min = 0;
s = 0;
ms = 0;
spans[0].innerHTML = '00';
spans[2].innerHTML = '00';
spans[4].innerHTML = '00';
$('button')[1].innerHTML = '开始';
clearInterval(time1);
}
//开始
$('button')[1].onclick = function() {
if ($('button')[1].innerHTML == '开始') {
$('button')[1].innerHTML = '停止';
clearInterval(time1);
time1 = setInterval(show, 10);
} else {
$('button')[1].innerHTML = '开始';
clearInterval(time1);
}
}
function show() {
ms++;
if (ms == 100) {
ms = 0;
s++;
}
if (s == 60) {
s = 0;
min++;
}
var msStr = ms;
if (ms < 10) {
msStr = "0" + ms
}
var sStr = s;
if (s < 10) {
sStr = "0" + s;
}
var minStr = min;
if (min < 10) {
minStr = "0" + min;
}
spans[0].innerHTML = minStr;
spans[2].innerHTML = sStr;
spans[4].innerHTML = msStr;
}
function $(str) {
return document.getElementsByTagName(str);
}
}

倒计时

html代码

复制代码

<div class="box">
12:00 场
<img src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAA1CAYAAAAklDnhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1
MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5j
ZUlEPSJ4bXAuaWlkOjY4Q0ZFMkY5MTJFNzExRThCMkM4OEM1RTNBNjczQUVBIiB4bXBNTTpEb2N1
bWVudElEPSJ4bXAuZGlkOjY4Q0ZFMkZBMTJFNzExRThCMkM4OEM1RTNBNjczQUVBIj4gPHhtcE1N
OkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDRkUyRjcxMkU3MTFFOEIy
Qzg4QzVFM0E2NzNBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjhDRkUyRjgxMkU3MTFF
OEIyQzg4QzVFM0E2NzNBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94Onht
cG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5oEyacAAACoklEQVR42sSYv0tbURTHX0LqD6T4g4pE
cHDoUOloBxVd/QFFEcQqWtrSKlKFmmAslopohzgIbv4FwUEE0clFujiIi+BSIbRQ0ooKRReRULHf
S48Qgu++c3/FAx+iyU3eJzf3nnPuC/1qavQ04zVY8szjCHRGNN9cBD6DSkOJKzAGzsOaH/AW1FuY
jRg4EH/oiJSCTxYk1sDK7T86Iu9BraHED/Au9wlVkYdg2lAiC/rBhYnIB/DIUOQj2M9/UkWkCsQN
JbbA8l0vqIhMgXIDiZ/gFbgxEakBEwYSf8Eg+OM3gCsyA8oMRETy25UN4IjUgVEDiW2wGDSIIzIL
ijUljsFLv3WhIvKYFphOXNO6OOUMDhKZA7qFcQF85Q6WXeQpeKEpcULlvY8xthp8iwR8I93qLLb7
KnOsSPWNfhd6Bro99yHqTi9IhyWzEXIsIXbSG7Djt1jbQHsBZkMkyZRs13wpgIRoiJKy7dsBWh1L
bN5Vt3JFQrQ2XMYeGKBk5yvSI7aRQ4k0eA4uZZlVPM47lDgTZxd6lKb4AcqkLuKSZiIdVGsiVFNc
xDV9yT1Orekjoe+MDw4pHqwmaJewit66Ql0QaX+DOTaZe4DitAFZxQaaEynKnJ6KCDeaQAtj3A7V
kBtXIpwT3iFV06zqquaKPKEtKIsM6Mo/StoWiQeMvSCJjO4+54hEwTCjuTk0STgckUm6QxTY3LgU
Kc+/jyFrblyKCIkKbnPjSkT8HDGV5saVyBAtVHZz40Ik7HNTRtrcuBARF2tQbW5ciCR0mhvbIs2E
cnNjWySh29zYFGnIK25KzY1Nkdziptzc2BKJUu7Qbm5sicQom2o3NzZEKqiu/DZpbmyIjIAHNBMZ
7x4iTALjhcgVQSIl3v87w5vePcY/AQYAFYR6skFSqBUAAAAASUVORK5CYII=" alt="小米闪购">
距离结束还有

00
:
00
:
00

</div>

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
 <div class="box">
<p class="round">12:00 场</p>
<img src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAA1CAYAAAAklDnhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1
MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5j
ZUlEPSJ4bXAuaWlkOjY4Q0ZFMkY5MTJFNzExRThCMkM4OEM1RTNBNjczQUVBIiB4bXBNTTpEb2N1
bWVudElEPSJ4bXAuZGlkOjY4Q0ZFMkZBMTJFNzExRThCMkM4OEM1RTNBNjczQUVBIj4gPHhtcE1N
OkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDRkUyRjcxMkU3MTFFOEIy
Qzg4QzVFM0E2NzNBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjhDRkUyRjgxMkU3MTFF
OEIyQzg4QzVFM0E2NzNBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94Onht
cG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5oEyacAAACoklEQVR42sSYv0tbURTHX0LqD6T4g4pE
cHDoUOloBxVd/QFFEcQqWtrSKlKFmmAslopohzgIbv4FwUEE0clFujiIi+BSIbRQ0ooKRReRULHf
S48Qgu++c3/FAx+iyU3eJzf3nnPuC/1qavQ04zVY8szjCHRGNN9cBD6DSkOJKzAGzsOaH/AW1FuY
jRg4EH/oiJSCTxYk1sDK7T86Iu9BraHED/Au9wlVkYdg2lAiC/rBhYnIB/DIUOQj2M9/UkWkCsQN
JbbA8l0vqIhMgXIDiZ/gFbgxEakBEwYSf8Eg+OM3gCsyA8oMRETy25UN4IjUgVEDiW2wGDSIIzIL
ijUljsFLv3WhIvKYFphOXNO6OOUMDhKZA7qFcQF85Q6WXeQpeKEpcULlvY8xthp8iwR8I93qLLb7
KnOsSPWNfhd6Bro99yHqTi9IhyWzEXIsIXbSG7Djt1jbQHsBZkMkyZRs13wpgIRoiJKy7dsBWh1L
bN5Vt3JFQrQ2XMYeGKBk5yvSI7aRQ4k0eA4uZZlVPM47lDgTZxd6lKb4AcqkLuKSZiIdVGsiVFNc
xDV9yT1Orekjoe+MDw4pHqwmaJewit66Ql0QaX+DOTaZe4DitAFZxQaaEynKnJ6KCDeaQAtj3A7V
kBtXIpwT3iFV06zqquaKPKEtKIsM6Mo/StoWiQeMvSCJjO4+54hEwTCjuTk0STgckUm6QxTY3LgU
Kc+/jyFrblyKCIkKbnPjSkT8HDGV5saVyBAtVHZz40Ik7HNTRtrcuBARF2tQbW5ciCR0mhvbIs2E
cnNjWySh29zYFGnIK25KzY1Nkdziptzc2BKJUu7Qbm5sicQom2o3NzZEKqiu/DZpbmyIjIAHNBMZ
7x4iTALjhcgVQSIl3v87w5vePcY/AQYAFYR6skFSqBUAAAAASUVORK5CYII=" alt="小米闪购">
<p class="desc">距离结束还有</p>
<p class="countdown clearfix">
<span>00</span>
<i>:</i>
<span>00</span>
<i>:</i>
<span>00</span>
</p>
</div>

css代码

复制代码

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

.box {
width: 234px;
height: 340px;
box-sizing: border-box;
margin: 0 auto;
border-top: 1px solid #e53935;
background-color: #f1eded;
text-align: center;
}
.round {
font-size: 21px;
color: #ef3a3b;
padding-top: 15px;
}
img {
margin: 25px 0;
border: none;
}
.desc {
color: rgba(0, 0, 0, .54);
font-size: 15px;
}
.countdown {
width: 168px;
margin: 28px auto 0;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}
.countdown span {
width: 46px;
height: 46px;
background: #605751;
color: #fff;
font-size: 24px;
line-height: 46px;
float: left;
}
.countdown i {
width: 15px;
float: left;
height: 46px;
line-height: 46px;
color: #605751;
font-size: 28px;
font-style: normal;
}

JavaScript代码

方法1

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

window.onload = function() {
var spans = document.getElementsByTagName('span');
var desc = document.getElementsByClassName('desc')[0];
var time;
time = setInterval(countdown, 1000);
function countdown() {
var dates = (new Date(2021, 0, 8, 9, 48, 0) - new Date()) / 1000;
var h = parseInt(dates / 3600);
var m = parseInt(dates % 3600 / 60);
var s = parseInt(dates % 60);
if (dates < 0) {
clearInterval(time);
h = 0;
m = 0;
s = 0;
desc.innerHTML = '本场已经结束';
}
spans[0].innerHTML = h < 10 ? '0' + h : h;
spans[1].innerHTML = (m < 10) ? "0" + m : m;
spans[2].innerHTML = (s < 10) ? "0" + s : s;
}
}

方法2

复制代码

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

window.onload = function() {
var date = new Date("2021-01-08 9:36:10");
// var date = new Date(2021,0,8,12,00,00);
var nowDate = new Date();
// 差值：总的秒数
var dateDiff = parseInt((date.getTime()-nowDate.getTime())/1000);
// 小时数
var hours = parseInt(dateDiff/3600);
// 分钟数
var min = parseInt(dateDiff/60)%60;
//秒数
var sec = dateDiff%60;
var timer,spans,desc = null;
window.onload = function() {
spans = document.getElementsByTagName("span");
desc = document.getElementsByClassName("desc")[0];
timer = setInterval(showTime,1000);
}
function showTime() {
sec--;
if (sec < 0) {
sec = 59;
min--;
}
if (min<0) {
min=59;
hours--;
}
// 计时结束
if (hours<0) {
hours = 0;
min=0;
sec = 0;
clearInterval(timer);
desc.innerHTML = "该场次已结束";
}
spans[0].innerHTML = hours<10?"0"+hours:hours;
spans[1].innerHTML = min<10?"0"+min:min;
spans[2].innerHTML = sec<10?"0"+sec:sec;
}
}