<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时效果</title>
</head>
<body>
<form name="myForm">
<input type="text" name="h" size="6" />时
<input type="text" name="m" size="6" />分
<input type="text" name="s" size="6" />秒
</form>
<button onclick="doStart();">开始</button>
<button onclick="doStop();">暂停</button>
<button onclick="doGoOn();">继续</button>
<h3 id="hid">0:0:0</h3>
<script type="text/javascript">
var hid = document.getElementById("hid");
var hh = 0,mm = 0,ss = 0;
var id = null;
// 开始倒计时
function doStart(){
hh = isNaN(parseInt(document.myForm.h.value)) ? 0 : parseInt(document.myForm.h.value);
mm = isNaN(parseInt(document.myForm.m.value)) ? 0 : parseInt(document.myForm.m.value);
ss = isNaN(parseInt(document.myForm.s.value)) ? 0 : parseInt(document.myForm.s.value);
if(id == null){ // 禁止多次点击产生计时效果出问题
id = setInterval("myTime()",1000);
}
}
// 暂停倒计时
function doStop(){
if(id != null){// 禁止多次点击产生计时效果出问题
clearInterval(id);
}
}
// 继续倒计时，只有在停止倒计时的情况下开始
function doGoOn(){
if(id != null){// 禁止多次点击产生计时效果出问题
id = setInterval("myTime()",1000);
}
}
// 运行倒计时
function myTime(){
checkTime();
ss--; // 秒数减一
if(ss < 0){
ss = 59;
mm--;
if(mm < 0){
mm = 59;
hh--;
if(hh < 0){
alert('时间到');
clearInterval(id);
return;
}
}
}
// 写入hid
hid.innerHTML = hh + ':' + mm + ':' + ss;
}
// 检查每个输入框设置的值，超过60，则自动进1
function checkTime(){
if(ss>59){
var s1 = parseInt(ss/60);
ss %= 60;
mm += s1;
if(mm > 59){
var m1 = parseInt(mm/60);
hh += m1;
mm %= 60;
}
}
return hh,mm,ss;
}
</script>
</body>
</html>
JavaScript设置倒计时效果
Stella981
• 阅读
586
点赞
收藏
