javaScript实现游戏倒计时功能

2024-05-06 16:46:51

字体：大中小

来源：转载

供稿：网友

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：laydate如何根据开始时间或者结束时间限制范围

下一篇：JavaScript实现新年倒计时效果