首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）

Posted in Javascript onJune 05, 2020

效果图展示，感觉不错可以参考实例代码。

使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）

具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div>00:00:00:00</div>
 <button>开始</button>
 <button disabled>暂停</button>
 <button disabled>继续</button>
 <button disabled>重置</button>

 <script>
//定义一个变量，根据定时器每秒执行一次，每次执行++自增操作，变量存储的数值，就会每秒+1。现在需要的记录效果是每0.01秒，也就是10毫秒执行一次。根据累计的数值执行进位。如果毫秒达到100就是1秒，如果秒达到60就是1分钟，如果分钟达到60就是1小时

  var ms = 0; // 毫秒
  var s = 0; // 秒
  var m = 0; // 分钟
  var h = 0; // 小时

  // 单独定义存储时、分、秒、毫秒的字符串的变量来存储累加时间的执行结果，因为如果直接在ms、s、m、h变量上进行拼接操作，会影响++操作的执行  
  var msStr = '';
  var sStr = '';
  var mStr = '';
  var hStr = '';

  // 因为定时器是定义在函数内部，必须定义一个全局变量来存储定时器，在函数外部可以调用终止定时器
  var time = 0;

  // 获取div标签对象
  var oDiv = document.querySelector('div');

  // 获取按钮的标签对象
  var oStart = document.querySelectorAll('button')[0]; // 开始
  var oPause = document.querySelectorAll('button')[1]; // 暂停
  var oCont = document.querySelectorAll('button')[2]; //继续
  var oReset = document.querySelectorAll('button')[3]; // 重置

  // 给四个按钮添加点击事件效果
  
  // 开始按钮
  oStart.onclick = function(){
   // 点击开始按钮执行函数，执行秒表计时
   setTimeStr();
   // 可以点暂停
   oPause.disabled = false;
   // 其他标签都不能点
   oStart.disabled = true;
   oCont.disabled = true;
   oReset.disabled = true;
  }

  // 暂停按钮
  oPause.onclick = function(){
   // 点击暂停按钮,清除定时器,终止秒表执行
   clearInterval(time);
   // 暂停本身和开始不能点
   oPause.disabled = true;
   oStart.disabled = true;
   // 继续和重置能点了
   oCont.disabled = false;
   oReset.disabled = false;
  }

  // 继续按钮
  oCont.onclick = function(){
   // 点击继续按钮，继续执行定时器
   setTimeStr();
   // 暂停可以点
   oPause.disabled = false;
   // 其他都不能点
   oCont.disabled = true;
   oReset.disabled = true;
   oStart.disabled = true;
  }


  // 重置按钮
  oReset.onclick = function(){
   // 点击重置按钮,将所有的数据都恢复到0的状态
   // 所有变量存储的数据都是0, div中的内容也恢复到0   
   // 定义所有存储时间的变量存储的数值为0 
   ms = 0; // 毫秒
   s = 0; // 秒
   m = 0; // 分钟
   h = 0; // 小时
   // 将div中的内容,设定为初始状态的00:00:00:00内容
   oDiv.innerHTML = '00:00:00:00';
   // 开始可以点
   oStart.disabled = false;
   // 其他都不能点
   oPause.disabled = true;
   oCont.disabled = true;
   oReset.disabled = true;
  }

  // 每次点击开始按钮或者继续按钮都会调用执行函数，都会生成一个新的定时器。time中存储的是当前这个新的定时器，是整个程序中定时器的序号
  // 例如点击开始按钮10次会生成10个定时，time中存储最后一个定时器的序号10
  // 当点击暂停按钮时，清除的是time中存储的序号是10的这一个定时器，之前 1-9定时器仍然会执行  
  // 解决方法：点击开始按钮之后，在点击暂停按钮之前，禁止再次点击开始按钮。也就是在清除原有定时器之前，不允许生成新的定时器

  // 定义函数，这个函数的作用就是记录执行的时间，有小时、分钟、秒、毫秒 4个部分。将记录的时间写入到div中，div中起始时默认都是0
  function setTimeStr(){  
   // 赋值操作,将定时器,存储在全局作用域变量中
   // 此处只是赋值操作
   time = setInterval(function(){
    ms++;
    // 毫秒是10毫秒一增加
    // ms存储的数值如果达到100，就是1秒种了
    // 给秒单位进位 s++ 
    // ms本身需要重新开始记录数值
    // 0:0:0:99 ---> 0:0:1:00
    if(ms == 100){
     s++;  // 秒进位
     ms = 0; // ms本身清零,重新记录
    }

    if(s == 60){
     m++;  // 分钟进位 
     s = 0;  // s秒 清零
    }

    if(m == 60){
     h++;  // 小时进位 
     m = 0;  // m分钟 清零
    }

    // 小时记录可以每24小时清零一次，或者100小时清零一次，都可以
    if(h == 100){
     h = 0;
    }

    // 如果记录的时间小于0，要做补零操作
    if(ms < 10){
     msStr = '0' + ms;
    }else{
     msStr = ms;
    }

    if(s < 10){
     sStr = '0' + s;
    }else{
     sStr = s;
    }

    if(m < 10){
     mStr = '0' + m;
    }else{
     mStr = m;
    }

    if(h < 10){
     hStr = '0' + h;
    }else{
     hStr = h;
    }
    // 每次执行返回一个记录时间的字符串，将这个字符串写入到div中
    oDiv.innerHTML = `${hStr}:${mStr}:${sStr}:${msStr}`;
   } , 10);  
   console.log(time);
  } 
 </script>
</body>
</html>

ps：下面看下JavaScript实现计时器，一个按钮实现开始和停止的功能

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var intervalId;
var i = 0;
var count=0;
function startTime(){
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var ms = document.getElementById("ms");
var buttonEle = document.getElementById("start");


if(i%2==0){
buttonEle.innerHTML="暂停计时";
intervalId = setInterval(function(){
count += 1;
var thehour=parseInt(count/360000);
var theminute=parseInt(count/6000%60);
var thesecond=parseInt(count/100%60);
var thems = parseInt(count%100);

if(thehour>=10){
hour.innerHTML=thehour+" ";
}
else{
hour.innerHTML="0"+thehour+" ";
}

if(theminute>=10){
minute.innerHTML=theminute+" ";
}
else{
minute.innerHTML="0"+theminute+" ";
}

if(thesecond>=10){
second.innerHTML=thesecond+" ";
}
else{
second.innerHTML="0"+thesecond+" ";
}
if(thems>=10){
ms.innerHTML=thems+" ";
}
else{
ms.innerHTML="0"+thems+" ";
}
},10)
}
else{
buttonEle.innerHTML="开始计时";
clearInterval(intervalId);
}
i++;
}
</script>
<style type="text/css">
body,html{
background: violet;
/*position: relative;*/
}
#firstDiv{
height: 50%;
width:50% ;
position:absolute;
margin-left: 350px;
margin-top:150px;
background: #ffcccc;
}
#twoDiv{
height: 200px;
width:100%;
position: absolute;
margin-top: 130px;
margin-left: 130px;;
}
span{
font-size: 30px;
}
button{
font-size: 20px;
}
</style>
</head>
<body>
<div id="firstDiv">
<div id="twoDiv">
<span><span id="hour">00 </span>时</span>
<span><span id="minute">00 </span>分</span>
<span><span id="second">00 </span>秒</span>
<span><span id="ms">00 </span>毫秒</span>

<button id="start" οnclick="startTime()">开始计时</button>
</div>
</div>
</body>
</html>

总结

到此这篇关于使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）的文章就介绍到这了,更多相关js 网页秒表内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）

- Author -

Submerge~

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
js中async函数结合promise的小案例浅析
Apr 14 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 #Javascript
taro 实现购物车逻辑的实例代码
Jun 05 #Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 #Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 #Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 #Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 #Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 #jQuery
进程假死(1) 逆序(1) jenkins(1) 访问日志(2) 弱口令(1) 线程(1) UV(1) 连接数(1) PV(1) ipv6(1)
You might like
浅析PHP Socket技术
2013/08/02 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JavaScript版代码高亮
2006/06/26 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
Vue异步加载about组件
2017/10/31 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
Vue.js中对css的操作（修改）具体方式详解
2018/10/30 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python实现包含min函数的栈
2016/04/29 Python
python破解zip加密文件的方法
2018/05/31 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
Django 路由控制的实现
2019/07/17 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
廉洁自律承诺书
2014/03/27 职场文书
法人授权委托书格式
2014/04/08 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
爱的承诺书
2015/01/20 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
python批量创建变量并赋值操作
2021/06/03 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript