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 相关文章推荐
jquery中this的使用说明
Sep 06 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
vue 返回上一页,页面样式错乱的解决
Nov 14 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中实现进程间通讯
2006/10/09 PHP
PHP中的string类型使用说明
2010/07/27 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python中redis的安装和使用
2016/12/04 Python
Python 类的特殊成员解析
2018/06/20 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
python hough变换检测直线的实现方法
2019/07/12 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Python实现AI换脸功能
2020/04/10 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
高中数学教学反思
2014/01/30 职场文书
《我的信念》教学反思
2014/02/15 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript