JavaScript 实现游戏倒计时功能
作者:代码拾荒时间:2026-10-22 19:16:29浏览:153
本文通过 JavaScript 代码详解游戏倒计时功能的实现逻辑。核心思路包括获取游戏总时长、记录开始时间,并在游戏进行中计算已用时长。最终通过总时长减去已用时长得出剩余倒计时时间,配合 HTML 按钮实现开始、暂停和停止控制。
JavaScript 游戏倒计时实现
本文分享了一段使用 JavaScript 实现游戏倒计时功能的具体代码示例,供读者参考学习。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
button:hover {
cursor: pointer;
}
</style>
<script>
//1.获取游戏的总时间
//2.游戏开始的时间
//3.游戏进行时
//4. 游戏进行时 - 游戏开始时间 = 玩家游戏时长
//5. 游戏总时间 - 玩家游戏时长 = 游戏倒计时
var zt;
var startBtn;
var djs_span;
var game_time; //游戏总时长
var game_start; //游戏开始时间
var game_djs; //游戏倒计时
var id; //计时器id
var isZT = false; //判断是否为暂停,false表示未点击暂停
var zt_time; //暂停时的倒计时值
var jx_id; //继续游戏的倒计时id
window.onload = function() {
//开始游戏
startBtn = document.getElementById("start");
//暂停游戏
zt = document.getElementById("zt");
//游戏倒计时
djs_span = document.getElementById("djs");
//开始游戏
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 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("游戏结束");
}
}
//暂停游戏
function game_zt() {
clearTimeout(id);
clearTimeout(jx_id);
}
//继续游戏
function game_jx() {
//获取游戏进行时
var playing = new Date();
game_djs = zt_time - parseInt((playing - 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="5px" value="1" />分钟 </br>
倒计时:<span id="djs"></span> 秒 </br>
<button id="start">开始游戏</button>
<button id="zt">暂停游戏</button>
<button id="stop">停止游戏</button>
</body>
</html>
以上内容即为本文的全部介绍,希望这段代码能对读者的学习提供实际帮助,同时也欢迎读者继续支持本站。
作者最新文章
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
