难点:
1、判断游戏是否暂停。
2、游戏暂停时需要达成的效果:游戏暂停时,开始按钮被启用;提取暂停时的倒计时值赋给暂停时的总时长;获得暂停时的及时时间,var i= new Date();判断暂停按钮是否被按下,更改iszt的布尔值;继续按钮被按下时,调用继续游戏的方法;
3、游戏继续方法和倒计时方法相同,只是需要重新获取一个及时时间和更改后的总时长。
4、注意获取的时间的数值类型。
5、注意在适合的方法内清除计时器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
var game_time; //游戏总时长
var game_djs; //游戏倒计时
var djs_span; //显示倒计时
var startBtn;
var game_start; //游戏开始时间
var id; //计时器
var zt_time; //暂停时的倒计时值
var isZT = false;
var jx_id; //继续游戏的倒计时id
window.onload = function() {
djs_span = document.getElementById("spa");
var zt = document.getElementById("zt");
startBtn = document.getElementById("btn");
zt.disabled=true;
document.getElementById("stop").disabled=true;
startBtn.onclick = function() {
clearTimeout(jx_id);
if(isZT) {
var reset = confirm("您的游戏正在进行中,您确定重新开始吗?")
if(reset) {
zt.textContent="暂停游戏";
isZT = false;
} else {
return;
}
}
game_time = document.getElementById("a").value * 60;
game_start = new Date();
startBtn.disabled = true;
djs();
zt.disabled=false;
document.getElementById("stop").disabled=false;
}
document.getElementById("stop").onclick = function() {
stopgame();
startBtn.disabled = false;
var reset = confirm("您的游戏正在进行中,您确定结束游戏吗?")
if(reset) {
zt.textContent="暂停游戏";
isZT = false;
zt.disabled=true;
document.getElementById("stop").disabled=true;
} else {
return;
}
}
zt.onclick = function() {
ztt();
if(isZT) {
zt.textContent = "暂停游戏";
isZT = false;
game_start = new Date();
startBtn.disabled = true;
jx();
} else {
zt.textContent = "继续游戏";
isZT = true;
startBtn.disabled = false;
zt_time = game_djs;
ztt();
}
}
}
function djs() {
var playing = new Date();
game_djs = game_time - parseInt((playing - game_start) / 1000);
djs_span.innerHTML = game_djs;
id = setTimeout("djs()", 1000);
if(game_djs < 1) {
clearTimeout(id);
alert("游戏结束");
zt.disabled=true;
document.getElementById("stop").disabled=true;
}
}
function ztt() {
clearTimeout(id);
clearTimeout(jx_id);
}
function jx() {
var playing = new Date();
game_djs = zt_time - parseInt((playing - game_start) / 1000);
jx_id = setTimeout("jx()", 1000);
djs_span.innerHTML =game_djs;
if(game_djs < 1) {
clearTimeout(jx_id);
alert("游戏结束");
zt.disabled=true;
document.getElementById("stop").disabled=true;
}
}
function stopgame() {
clearTimeout(id);
clearTimeout(jx_id);
game_djs = 0;
djs_span.innerHTML = game_djs;
}
</script>
<body>
游戏时间:<input type="text" id="a" value="2" />分钟<br/> 游戏倒计时:
<span id="spa"></span>秒<br/>
<button id="btn">开始游戏</button>
<button id="zt">暂停游戏</button>
<button id="stop">游戏结束</button>
</body>
</html>