首页
所有分类
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 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
跟我一起学写jQuery插件开发方法（附完整实例及下载）
Apr 01 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
js实现交通灯效果
Jan 13 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
js简单实现自动生成表格功能示例
Jun 02 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
挪威购物网站(7) 意大利购物网站(128) 比利时购物网站(33) 南非购物网站(8) 丹麦购物网站(22) 肯尼亚购物网站(2) 阿根廷购物网站(9) 瑞典购物网站(55) 澳大利亚购物网站(309) 芬兰购物网站(10)
You might like
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
初识laravel5
2015/03/02 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
jQuery+AJAX实现遮罩层登录验证界面（附源码）
2020/09/13 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python有证书的加密解密实现方法
2014/11/19 Python
Python实现文件复制删除
2016/04/19 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
python能自学吗
2020/06/18 Python
python time.strptime格式化实例详解
2021/02/03 Python
Doyoueven官网：澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
呐喊读书笔记
2015/06/30 职场文书
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android