HTML实现倒计时功能、暂停、继续、重置
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>time remaining</title>
</head>
<!--html部分非常easy，须要被javascript控制的行内文本与提交button都被编上ID-->
<body>
<div>F5或者ctrl+F5刷新页面重新计时（设定时间10分钟）</div>
<div class="leftTime">剩余时间：</br></div>
<div class="timeShow"></span><span id="timer"></span></div>
<div id="btnClick">
<div><button id="stop" class="comstyle">暂停</button></div>
<div><button id="restart" class="comstyle">开启</button></div>
<div><button id="nextOne">下一个人</button></div>
</div>
</body>
<style>
.leftTime {
width: 1000px;
margin: 0 auto;
font-size: 150px;
}
.timeShow {
font-size: 300px;
border: solid 1px red;
margin: 0 auto;
text-align: center;
height: 400px;
}
#btnClick div {
float: right;
}
#btnClick button {
margin-right: 10px;
float: right;
height: 40px;
}
</style>
</html>
<script>
/*主函数要使用的函数，进行声明*/
var clock = new clock();
/*指向计时器的指针*/
var timer;
var flag = true;
window.onload = function () {
/*主函数就在每1000毫秒调用1次clock函数中的move方法就可以*/
if (flag) {
timer = setInterval("clock.move()", 1000);
}
if (!flag) {
alert("hh")
}
}
var clickB = document.getElementById('stop');
clickB.addEventListener("click", function () {
clearInterval(timer)
})
var restartB = document.getElementById('restart');
restartB.addEventListener("click", function () {
timer = setInterval("clock.move()", 1000)
})
var nextOneB = document.getElementById('nextOne');
nextOneB.addEventListener("click", function () {
window.location.reload();
})
function clock() {
/*s是clock()中的变量，非var那种全局变量，代表剩余秒数*/
// 设定时间10分钟
this.s = 600;
this.move = function () {
if (flag) {
/*输出前先调用exchange函数进行秒到分秒的转换，由于exchange并不是在主函数window.onload使用，因此不须要进行声明*/
document.getElementById("timer").innerHTML = exchange(this.s);
/*每被调用一次。剩余秒数就自减*/
if (flag) {
this.s = this.s - 1;
}
/*假设时间耗尽，那么。弹窗，使button不可用，停止不停调用clock函数中的move()*/
if (this.s == 0) {
alert("时间到");
flag = false;
clearTimeout(timer);
}
}
}
}
function exchange(time) {
/*javascript的除法是浮点除法。必须使用Math.floor取其整数部分*/
this.m = Math.floor(time / 60);
this.s = Math.floor((time - this.m * 60) % 60);
/*存在取余运算*/
this.ms = (time % 1000);
this.text = this.m + "分" + this.s + "秒";
/*传过来的形式參数time不要使用this，而其余在本函数使用的变量则必须使用this*/
return this.text;
}
</script>
