使用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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
</head>
<style type="text/css">
#box{
background-color: #737373;
color: white;
font-size: 100px;
text-align: center;
}
</style>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
// 将倒计时的秒数转为分钟,10以下补0
function formatTime(s){
return parseInt(s/60)+":"+(s%60<10?"0"+(s%60):s%60);
}
// 倒计时的时间(120秒)
let myTime = 120;
// 获取元素
let boxEle = document.getElementById("box");
// 先往页面输出一下开始时间
boxEle.innerText = formatTime(myTime);
// 使用定时器函数进行每秒一刷新
let myInterval = setInterval(function(){
// 减少时间
myTime--;
// 重新显示时间
boxEle.innerText = formatTime(myTime);
// 时间到了给出提示并清除定时器
if(myTime==0){
alert("倒计时结束");
clearInterval(myInterval);
}
},1000);
</script>
</html>