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中判断函数是new还是()调用的区别说明
Apr 07 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
JS常用知识点整理
Jan 21 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
在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
十天学会php(3)
2006/10/09 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python中有关时间日期格式转换问题
2019/12/25 Python
python next()和iter()函数原理解析
2020/02/07 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
总经理司机职责
2014/02/02 职场文书
伊琍体标语
2014/06/25 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL