<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
button:hover{
cursor: pointer;
}
</style>
<script>
//1.獲取遊戲開始總時間60s
//2.獲取遊戲開始時間
//3.獲取遊戲進行時間
//4.獲取遊戲時長= 開始進行時 - 遊戲開始時間
//5.獲取遊戲倒計時 = 遊戲總時間 - 玩家遊戲時長
var game_time;//遊戲總時長
var game_start;//遊戲開始時間
var djs_span;//顯示倒計時
var id;//計時器
var game_djs;//遊戲倒計時
var isZT = false;//判斷是否爲暫停，false表示未點擊暫停
var zt_time;//暫停時的倒計時值
var jx_id;//繼續遊戲的倒計時的id
var startBtn;//遊戲開始按鈕
window.onload = function(){
djs_span = document.getElementById("djs");
//暫停遊戲
var zt = document.getElementById("zt");
//開始遊戲
startBtn = document.getElementById("btn");
startBtn.onclick = function(){
clearTimeout(jx_id);
if(isZT){
var reset = confirm("你的遊戲正在進行中，確定要重新開始？");
if(reset){
zt.textContent = "暫停遊戲";
isZT = false;
}else{
return;
}
}
//遊戲總時長
game_time = document.getElementById("time").value*60;
//記錄遊戲開始時間
game_start = new Date();
//禁用開始按鈕
startBtn.disabled = true;
djs();
}
//停止遊戲
document.getElementById("stop").onclick = function(){
game_stop();
//還原開始按鈕
startBtn.disabled = false;
}
zt.onclick = function(){
game_zt();
if(isZT){
//點擊繼續按鈕
zt.textContent = "暫停遊戲";
isZT = false;
//禁用開始按鈕
startBtn.disabled = true;
//記錄遊戲開始時間
game_start = new Date();
game_jx();
}else{
//點擊暫停按鈕
zt.textContent = "繼續遊戲";
isZT = true;
//還原開始按鈕
startBtn.disabled = false;
//記錄暫停時間
zt_time = game_djs;
game_zt();
}
}
}
//倒計時方法
function djs(){
//獲取遊戲進行時間
var gameing = new Date();
//計算倒計時
game_djs = game_time - parseInt((gameing - game_start)/1000);
//顯示倒計時
djs_span.innerHTML = game_djs;
id = setTimeout("djs()",1000);//步長
//遊戲結束
if(game_djs<1){
clearTimeout(id);
alert("遊戲結束！");
}
}
//暫停遊戲
function game_zt(){
clearTimeout(id);
clearTimeout(jx_id);
}
//繼續遊戲
function game_jx(){
//獲取遊戲進行時
var gameing = new Date();
game_djs = zt_time - parseInt((gameing - game_start)/1000);
djs_span.innerHTML = game_djs;
jx_id = setTimeout("game_jx()",1000);
//遊戲結束
if(game_djs<1){
clearTimeout(jx_id);
alert("遊戲結束！");
}
}
//遊戲結束
function game_stop(){
clearTimeout(id);
clearTimeout(jx_id);
game_djs = 0;
djs_span.innerHTML = game_djs;
}
</script>
</head>
<body>
遊戲時長：<input id="time" type="text" size="5" value="1"/>分鐘<br />
遊戲倒計時：<span id="djs"></span>秒<br />
<button id="btn">開始遊戲</button>
<button id="zt">暫停遊戲</button>
<button id="stop">停止遊戲</button>
</body>
</html>
打地鼠遊戲之遊戲倒計時
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
[轉載]慎用標籤 提交表單 [IE6無法提交表單][事件衝突]
我們都知道可以使用 [form].submit(); 來動態提交表單,但使用點擊<a/>標籤來提交表單, 會出現什麼情況呢?我們都知道, <a/>有個