JS实现简易网页倒计时
引入
- 实现倒计时类的功能，记录过期时间
- 注意：把代码放入md文档时，删除多余的空行，否则看起来格式错乱，未特殊说明，均为实现中最后一个版本
功能
- 倒计时
- 标签id与中文对应
- 批量新增
- 少于3天即标红
- 配合加密插件使用
- 批量增加
div标签 - 汇总需要修改的变量（统一位置方便修改）
- 自动发送邮件
- 解决版本七和版本八bug
实现
版本一
- 简易实现版本，能在页面展示倒计时
1 |
|
版本二
- 实现标签中文名，不便于新增
1 |
|
版本三
- 统一命名规则，使用
map存储数据，使用for-loop新增元素，尽可能减少改动的地方
1 |
|
版本四
- 解决
map获取长度问题 - 设置当时间小于3天，字体颜色变红
1 |
|
版本五
- 之前版本不能搭配加密插件hexo-blog-encrypt使用，此版本修复
- 曲线救国，通过添加一个按钮，触发
onclick事件，从而实现js脚本加载
1 |
|
版本六
修改倒计时归零产生的
undefined输出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
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>
#_hidediv{display: none;}
.ant-btn {
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
border: 1px solid transparent;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
box-shadow: 0 2px 0 rgba(0,0,0,0.015);
cursor: pointer;
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
height: 32px;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
color: rgba(0,0,0,0.65);
background-color: #fff;
border-color: #d9d9d9;
}
.ant-btn-red {
color: #fff;
background-color: #FF5A44;
border-color: #FF5A44;
text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
box-shadow: 0 2px 0 rgba(0,0,0,0.045);
}
</style>
<script type="text/javascript">
// 预处理
let total = new Map([
['_n0', {name: '考试', date: '2022/11/28 16:56:00'}],
['_n1', {name: '放假', date: '2023/7/17 00:00:00'}],
]);
var totalSiz = total.size;
var list_map = new Array();
for (var i = 0; i < totalSiz; i++) {
list_map.push({dcolor: '_c' + i, name: '_n' + i, day: '_d' + i, hour: '_h' + i, min: '_m' + i, sec: '_s' + i });
}
function run() {
// 展开标签
document.getElementById('_hidediv').style.display = 'block';
document.getElementById('_bt').style.display = 'none';
countTime();
}
// 倒计时脚本
function countTime() {
for (var i = 0; i < list_map.length; i++) {
do_countTime(list_map[i].dcolor, list_map[i].name, list_map[i].day, list_map[i].hour, list_map[i].min, list_map[i].sec);
}
// 递归每秒调用countTime方法，显示动态时间效果
setTimeout(countTime, 1000);
}
function do_countTime(cc, nn, dd, hh, mm, ss) {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var str = total.get(nn).date;
var endDate = new Date(str);
var end = endDate.getTime();
// 其他属性
var name = total.get(nn).name;
//时间差
var leftTime = end - now;
//定义变量 d,h,m,s保存倒计时的时间
var d, h, m, s;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
} else {
d = 0;
h = 0;
m = 0;
s = 0;
}
//将倒计时赋值到div中
document.getElementById(nn).innerHTML = name + ": ";
document.getElementById(dd).innerHTML = d + "天";
document.getElementById(hh).innerHTML = h + "时";
document.getElementById(mm).innerHTML = m + "分";
document.getElementById(ss).innerHTML = s + "秒";
// 时间少于三天，标红
if (d < 3) {
document.getElementById(cc).style.color = "#f00";
}
}
</script>
</head>
<body>
<center><button id='_bt', onclick='run()', class='ant-btn ant-btn-red'>show</button></center>
<div id = '_hidediv'>
<div id='_c0'><span id="_n0">00</span><span id="_d0">00</span><span id="_h0">00</span><span id="_m0">00</span><span id="_s0">00</span></div>
<div id='_c1'><span id="_n1">00</span><span id="_d1">00</span><span id="_h1">00</span><span id="_m1">00</span><span id="_s1">00</span></div>
</div>
</body>
</html>
版本七
实现根据输入参数批量增加
div和span标签重复性操作使用循环替代
目前只需要修改
total即可完成更新目前存在的问题：需要输入密码才能显示
show按钮时，点击show无法查看结果，需要主动刷新一次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
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>
#_hidediv{display: none;}
.ant-btn {
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
border: 1px solid transparent;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
box-shadow: 0 2px 0 rgba(0,0,0,0.015);
cursor: pointer;
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
height: 32px;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
color: rgba(0,0,0,0.65);
background-color: #fff;
border-color: #d9d9d9;
}
.ant-btn-red {
color: #fff;
background-color: #FF5A44;
border-color: #FF5A44;
text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
box-shadow: 0 2px 0 rgba(0,0,0,0.045);
}
</style>
<script type="text/javascript">
// 预处理
// 只需要修改这个
const total = [
{name: '考试', date: '2022/11/28 16:56:00'},
{name: '放假', date: '2023/7/17 00:00:00'},
]
// 只需要修改这个
var totalSiz = total.length;
// 待生成div标签的数量及span标签数量
const divSize = totalSiz;
const spanSize = 5;
// span时间标签
const labels = [
": ", "天", "时", "分", "秒"
]
window.onload = function() {
// 获取要添加div标签的父元素
const parentElement = document.getElementById("_hidediv");
// 循环生成div标签并添加到父元素中
for (let i = 0; i < divSize; i++) {
const newDiv = document.createElement("div");
newDiv.id = "_d" + i;
parentElement.appendChild(newDiv);
for (let j = 0; j < spanSize; j++) {
const newSpan = document.createElement("span");
newSpan.id = "_s" + "_" + i + "_" + j;
newSpan.textContent = "00";
newDiv.appendChild(newSpan);
}
}
}
function run() {
// 展开标签
document.getElementById('_hidediv').style.display = 'block';
document.getElementById('_bt').style.display = 'none';
countTime();
}
// 倒计时脚本
function countTime() {
for (var i = 0; i < totalSiz; i++) {
do_countTime(i);
}
// 递归每秒调用countTime方法，显示动态时间效果
setTimeout(countTime, 1000);
}
function do_countTime(idx) {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var str = total[idx].date;
var endDate = new Date(str);
var end = endDate.getTime();
// 其他属性
var name = total[idx].name;
//时间差
var leftTime = end - now;
//定义变量 d,h,m,s保存倒计时的时间
var d, h, m, s;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
} else {
d = 0;
h = 0;
m = 0;
s = 0;
}
const resTime = [name, d, h, m, s]
//将倒计时赋值到div中
const cc = "_d" + idx;
for (let i = 0; i < spanSize; i++) {
const cId = "_s" + "_" + idx + "_" + i;
document.getElementById(cId).innerHTML = resTime[i] + labels[i];
}
// 时间少于三天，标红
if (d < 3) {
document.getElementById(cc).style.color = "#f00";
}
}
</script>
</head>
<body>
<!-- 加密插件的缘故，暂时采用button方案 -->
<center><button id='_bt', onclick='run()', class='ant-btn ant-btn-red'>show</button></center>
<div id='_hidediv'></div>
</body>
</html>
版本八
去除
button使用，任可使用目前存在的问题：仍然需要主动刷新才会显示
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
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<script type="text/javascript">
// 预处理
// 只需要修改这个
const total = [
{name: '考试', date: '2022/11/28 16:56:00'},
{name: '放假', date: '2023/7/17 00:00:00'},
]
// 只需要修改这个
var totalSiz = total.length;
// 待生成div标签的数量及span标签数量
const divSize = totalSiz;
const spanSize = 5;
// span时间标签
const labels = [
": ", "天", "时", "分", "秒"
]
window.onload = function() {
// 获取要添加div标签的父元素
const parentElement = document.getElementById("_hidediv");
// 循环生成div标签并添加到父元素中
for (let i = 0; i < divSize; i++) {
const newDiv = document.createElement("div");
newDiv.id = "_d" + i;
parentElement.appendChild(newDiv);
for (let j = 0; j < spanSize; j++) {
const newSpan = document.createElement("span");
newSpan.id = "_s" + "_" + i + "_" + j;
newSpan.textContent = "00";
newDiv.appendChild(newSpan);
}
}
countTime();
}
// 倒计时脚本
function countTime() {
for (var i = 0; i < totalSiz; i++) {
do_countTime(i);
}
// 递归每秒调用countTime方法，显示动态时间效果
setTimeout(countTime, 1000);
}
function do_countTime(idx) {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var str = total[idx].date;
var endDate = new Date(str);
var end = endDate.getTime();
// 其他属性
var name = total[idx].name;
//时间差
var leftTime = end - now;
//定义变量 d,h,m,s保存倒计时的时间
var d, h, m, s;
if (leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
} else {
d = 0;
h = 0;
m = 0;
s = 0;
}
const resTime = [name, d, h, m, s]
//将倒计时赋值到div中
const cc = "_d" + idx;
for (let i = 0; i < spanSize; i++) {
const cId = "_s" + "_" + idx + "_" + i;
document.getElementById(cId).innerHTML = resTime[i] + labels[i];
}
// 时间少于三天，标红
if (d < 3) {
document.getElementById(cc).style.color = "#f00";
}
}
</script>
</head>
<body>
<div id='_hidediv'></div>
</body>
</html>
参考
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 cv-programmer！
