js实现秒表计时器


Posted in Javascript onDecember 16, 2019

本文实例为大家分享了js实现秒表计时器的具体代码,供大家参考,具体内容如下

秒表计时器的实现:

效果图如下:

js实现秒表计时器

附代码,已调试运行

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  #div1 {
   width: 300px;
   height: 400px;
   background: skyblue;
   margin: 100px auto;
   text-align: center;
  }
  
  #count {
   width: 200px;
   height: 150px;
   line-height: 150px;
   margin: auto;
   font-size: 40px;
  }
  
  #div1 input {
   width: 150px;
   height: 40px;
   background: orange;
   font-size: 25px;
   margin-top: 20px
  }
 </style>
</head>

<body>
 <div id="div1">
  <div id="count">
   <span id="id_H">00</span>
   <span id="id_M">00</span>
   <span id="id_S">00</span>
  </div>
  <input id="start" type="button" value="开始">
  <input id="pause" type="button" value="暂停">
  <input id="stop" type="button" value="停止">
 </div>
 <script>
  //可以将查找标签节点的操作进行简化 var btn = getElementById('btn')
  function $(id) {
   return document.getElementById(id)
  }
  window.onload = function() {
   //点击开始建 开始计数
   var count = 0
   var timer = null //timer变量记录定时器setInterval的返回值
   $("start").onclick = function() {
    timer = setInterval(function() {
     count++;
     console.log(count)
      // 需要改变页面上时分秒的值
     console.log($("id_S"))
     $("id_S").innerHTML = showNum(count % 60)
     $("id_M").innerHTML = showNum(parseInt(count / 60) % 60)
     $("id_H").innerHTML = showNum(parseInt(count / 60 / 60))
    }, 1000)
   }
   $("pause").onclick = function() {
     //取消定时器
     clearInterval(timer)
    }
    //停止记数 数据清零 页面展示数据清零
   $("stop").onclick = function() {
    //取消定时器
    $("pause").onclick()
     // clearInterval(timer)
     //数据清零 总秒数清零
    count = 0
     //页面展示数据清零
    $("id_S").innerHTML = "00"
    $("id_M").innerHTML = "00"
    $("id_H").innerHTML = "00"
   }

   //封装一个处理单位数字的函数
   function showNum(num) {
    if (num < 10) {
     return '0' + num
    }
    return num
   }
  }
 </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
javascript数组去掉重复
May 12 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 #Javascript
js实现计时器秒表功能
Dec 16 #Javascript
原生Vue 实现右键菜单组件功能
Dec 16 #Javascript
axios如何取消重复无用的请求详解
Dec 15 #Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 #Javascript
Angular6项目打包优化的实现方法
Dec 15 #Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 #Javascript
You might like
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
Dedecms常用函数解析
2008/02/01 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
python中正则的使用指南
2016/12/04 Python
python基础之入门必看操作
2017/07/26 Python
python破解zip加密文件的方法
2018/05/31 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python实现各种插值法(数值分析)
2019/07/30 Python
python编写猜数字小游戏
2019/10/06 Python
Python colormap库的安装和使用详情
2020/10/06 Python
女大学生个人求职信
2013/12/09 职场文书
执行总经理岗位职责
2014/02/03 职场文书
主管会计岗位责任制
2014/02/10 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
公司节能减排方案
2014/05/16 职场文书
供用电专业求职信
2014/07/07 职场文书
环保志愿者活动方案
2014/08/14 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
公司老总年会致辞
2015/07/30 职场文书
教师节主题班会教案
2015/08/17 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书