最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

javaScript实现游戏倒计时功能

来源:懂视网 责编:小OO 时间:2020-11-27 22:03:43
文档

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;djs()。
推荐度:
导读本文实例为大家分享了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;djs()。

本文实例为大家分享了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>

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

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;djs()。
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top