首页
所有分类
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 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
javascript处理table表格的代码
Dec 06 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
详解vue中axios的封装
Jul 18 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 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
SandBox(1) swing(1) cudn(1) RTX 3050 ti(1) Git(3) K8s(1) cudnn(1) webpack(1) OpenFeign(1) calc(1)
You might like
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
Laravel下生成验证码的类
2017/11/15 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
node跨域请求方法小结
2017/08/25 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
python连接池实现示例程序
2013/11/26 Python
Python多线程编程（四）：使用Lock互斥锁
2015/04/05 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python数组定义方法
2016/04/13 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
如何基于Python批量下载音乐
2019/11/11 Python
基于python plotly交互式图表大全
2019/12/07 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python xlsxwriter模块的使用
2020/12/24 Python
阿根廷在线宠物商店：Puppis
2018/03/23 全球购物
异常和异常类的概念
2014/09/12 面试题
SOA面试题：如何在SOA中实现松耦合
2013/07/21 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
人事主管岗位职责
2014/01/30 职场文书
道歉短信大全
2015/05/12 职场文书
高三教师工作总结2015
2015/07/21 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android