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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 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实现文件编码批量转换
2014/03/10 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
jquery模拟alert的弹窗插件
2015/07/31 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
Python 文件重命名工具代码
2009/07/26 Python
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python多进程编程技术实例分析
2014/09/16 Python
Python中装饰器的一个妙用
2015/02/08 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
python实现连续图文识别
2018/12/18 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
Python接收手机短信的代码整理
2020/08/02 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
带薪年假请假条
2014/02/04 职场文书
创意广告词
2014/03/17 职场文书
导游词之神仙居景区
2019/11/15 职场文书
如何理解及使用Python闭包
2021/06/01 Python
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫