javaScript实现游戏倒计时功能
更新时间：2018年11月17日 09:59:20 作者：Z_唐
这篇文章主要为大家详细介绍了javaScript实现游戏倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现游戏倒计时的具体代码，供大家参考，具体内容如下
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文详细介绍了如何使用HTML、CSS和JavaScript实现动画函数,包括参数设置和动画过程中的状态管理,文章还涉及了如何获取DOM元素、设置动画开始和结束的回调函数,感兴趣的朋友跟随小编一起看看吧2024-10-10
这篇文章给大家分享了javascript中UMD规范的代码推演的相关的知识点内容，有兴趣的朋友们学习下。2018-08-08
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
这篇文章主要介绍了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法,结合具体实例形式总结分析了微信小程序页面跳转及列表item项跳转页面的相关操作技巧,需要的朋友可以参考下2017-11-11
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
上个礼拜修改测试一个后台管理项目，在测试与各个浏览器兼容性的时候，发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框，就像新打开一个页面一样，父窗口仍然可以随意获取焦点，并可以打开多个窗体，而且返回值returnValue也无法返回，一直是undefined2016-10-10
用来获取当前目录的js代码，需要的朋友可以参考下，主要利用了split函数。2010-12-12
js跳转页面的方法有很多，本文搜集整理了一些，个人感觉还不错，希望对大家有所帮助2014-02-02
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
无法在infowindow里面添加的div进行绑定事件处理，官方的API，发现了google.maps.InfoWindow下面的Events里面有个domready事件2013-04-04
这篇文章主要为大家详细介绍了JavaScript实现前端实时搜索功能 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了JS学习笔记之数组去重实现方法,结合实例形式总结分析了javascript数组去重的5种常见实现方法及相关操作技巧,需要的朋友可以参考下2019-05-05
一般情况下，使用 “=” 可以实现赋值。但对于数组、对象、函数等这些引用类型的数据，这个符号就不好使了。下面我们来详细学习下吧2019-06-06
最新评论