javaScript实现游戏倒计时功能


Posted in Javascript onNovember 17, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
Javascript的表单验证长度
Mar 16 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
Javascript实现时间倒计时功能
Nov 17 #Javascript
Javascript实现秒表倒计时功能
Nov 17 #Javascript
js实现简单模态框实例
Nov 16 #Javascript
js实现搜索栏效果
Nov 16 #Javascript
JavaScript实现简单音乐播放器
Apr 17 #Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 #Javascript
微信小程序自定义toast的实现代码
Nov 16 #Javascript
You might like
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Django如何实现上传图片功能
2019/08/16 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
领导视察欢迎词
2014/01/15 职场文书
战友聚会邀请函
2014/01/18 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
协议书范本
2014/04/23 职场文书
团日活动总结
2014/04/28 职场文书
租房安全协议书
2014/08/20 职场文书
实验心得体会
2014/09/05 职场文书
商场广播稿范文
2015/08/19 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript