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 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
vue 实现element-ui中的加载中状态
Nov 11 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
拖动一个HTML元素
2006/12/22 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
社区敬老月活动总结
2015/05/07 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL