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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
jQuery的文档处理程序详解
May 10 Javascript
javascript 用函数实现继承详解
May 28 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
Vue组件为什么data必须是一个函数
Jun 11 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
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
js实现数字滚动特效
2019/12/16 Javascript
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
python 递归相关知识总结
2021/03/03 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
一道SQL面试题
2012/12/31 面试题
成功的酒店创业计划书
2013/12/27 职场文书
大专会计自我鉴定
2014/02/06 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
保密承诺书范文
2014/03/27 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python