首页
所有分类
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引导程序
Oct 26 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
vue实现滑动切换效果（仅在手机模式下可用）
Jun 29 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
js实现浏览器打印功能的示例代码
Jul 15 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 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
greenlet(1) pytest(3) csv(4) 正则表达式(3) 信息校验(1) 自动播放(1) Coroutine(1) 静态压缩(1) gevent(1) Excel(4)
You might like
php中执行系统命令的方法
2015/03/21 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
php链表用法实例分析
2015/07/09 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
移动节点的jquery代码
2014/01/13 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
python实现中文输出的两种方法
2015/05/09 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
秋季开学典礼主持词
2014/03/19 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
创业计划书之酒厂
2019/10/14 职场文书
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android