javascript实现一款好看的秒表计时器


Posted in Javascript onSeptember 05, 2020

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

实现图片:

分+秒+跑秒

javascript实现一款好看的秒表计时器

时+分+秒+跑秒

javascript实现一款好看的秒表计时器

需求分析:

1、显示整个秒表页面;

2、在点击“开始”按钮之后,开始计时,并将按钮转为“暂停”按钮,在点击“暂停”按钮之后,将按钮转为“开始”按钮,并停止计时;

3、在点击“复位”按钮之后,将显示的计时清零,并将按钮变回“开始”按钮。

页面结构:

<div id="miaoBiao">
 <div id="dingShi">
 <p>
 <!-- <span id="houer">00</span> : -->
 <span id="minute">00</span> : 
 <span id="second">00</span> 
 <span id="msecond">00</span>
 </p>
 <!-- 显示:时:分:秒 跑秒 ,“时”解除注释可使用 -->
 <button id="btn1">开始</button>
 <button id="reset">复位</button>
 </div>
</div>

页面的主体结构主要包括四个span,包含四个秒表上显示的时间;以及两个按钮:“开始/暂停”与“复位”按钮。

一些函数:

id节点调用函数

function jieDian(id){
   return document.getElementById(id);
  }

通过调用此函数可以简化页面代码

开始运行函数

function startBtn(){
 timer1=setInterval(function(){
 i++
 jieDian("msecond").innerHTML =doubleLing(i%100);
 jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ;
 jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ;
 jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ;
 },10)
 }
 //开始运行函数

暂停函数

function pasueBtn(){
 clearInterval(timer1)
 }

赋0函数

function doubleLing(i){
 if(i<10){
 return "0"+i
 }else{
 return i
 }
 }
//赋0函数,当时分秒显示为个位数时,在前面加上“0”

完整代码,复制可用:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 #miaoBiao{
 width: 550px;height: 450px;background-color: #1d262d;overflow: hidden;
 margin: 50px auto;border-radius: 150px;
 }
 #dingShi{
 width: 400px;height: 230px;background-color:#d0eaeb;text-align: center;
 padding-top: 0px;margin: 110px auto;border-radius: 40px;
 }
 #dingShi p{
 font-size: 40px;padding-top: 40px;
 }
 #minute,#second,#houer{
 font-size: 56px;
 }
 #dingShi button{
 width: 80px;height: 35px;background-color: orange;margin: 10px auto;
 line-height: 35px;font-weight: bold;margin: 0px 20px;
 }
 </style>
</head>
<body>
 <div id="miaoBiao">
 <div id="dingShi">
 <p>
 <span id="houer">00</span> : 
 <span id="minute">00</span> : 
 <span id="second">00</span> 
 <span id="msecond">00</span>
 </p>
 <!-- 显示:时:分:秒 跑秒 ,“时”解除注释可使用 -->
 <button id="btn1">开始</button>
 <button id="reset">复位</button>
 </div>
 </div>
 
 <script>
 var i = 0;
 var timer1=null;
 var isRunning =false;
 //isRunning用于判断当前是否正在运行
 function jieDian(id){
 return document.getElementById(id);
 }
 //id节点调用函数

 function startBtn(){
 timer1=setInterval(function(){
 i++
 jieDian("msecond").innerHTML =doubleLing(i%100);
 jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ;
 jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ;
 jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ;
 },10)
 }
 //开始运行函数

 function pasueBtn(){
 clearInterval(timer1)
 }
 //暂停函数

 jieDian("btn1").onclick = function(){
 if(!isRunning){
 jieDian("btn1").innerHTML = "暂停";
 isRunning = true;
 startBtn();
 }else{
 jieDian("btn1").innerHTML="开始";
 isRunning = false;
 pasueBtn();
 }
 }
 //“开始”与“暂停”点击按钮:
 //当按钮显示为“开始”,点击之后,将按钮转为“暂停”按钮,并触发相应条件;
 //当按钮显示为“暂停”,点击之后,将按钮转为“开始”按钮,并触发相应条件。

 jieDian("reset").onclick =function(){
 clearInterval(timer1)
 i = 0;
 isRunning = false;
 jieDian("btn1").innerHTML="开始";
 jieDian("msecond").innerHTML ="00";
 jieDian("second").innerHTML ="00";
 jieDian("minute").innerHTML ="00";
 jieDian("houer").innerHTML ="00";
 }
 //复位按钮,点击之后将秒表各值复位,并“暂停”秒表

 function doubleLing(i){
 if(i<10){
 return "0"+i
 }else{
 return i
 }
 }
 //赋0函数,当时分秒显示为个位数时,在前面加上“0”
 </script>
</body>
</html>

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

Javascript 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
setAttribute 与 class冲突解决
Feb 17 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
详解JavaScript 作用域
Jul 14 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 #Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 #Javascript
Vue中component标签解决项目组件化操作
Sep 04 #Javascript
JS数组转字符串实现方法解析
Sep 04 #Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 #Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 #Javascript
解决vue scoped scss 无效的问题
Sep 04 #Javascript
You might like
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
关于RxJS Subject的学习笔记
2018/12/05 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
工作失误检讨书范文大全
2014/01/13 职场文书
书香家庭事迹材料
2014/05/09 职场文书
学校募捐倡议书
2014/05/14 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
python在package下继续嵌套一个package
2022/04/14 Python