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 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
JS实现鼠标移动拖尾
Dec 27 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
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Django中信号signals的简单使用方法
2019/07/04 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
python Pexpect模块的使用
2020/12/25 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
单位消防安全制度
2014/01/12 职场文书
医院检讨书范文
2014/02/01 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
七匹狼男装广告词
2014/03/21 职场文书
企业授权委托书范本
2014/09/22 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
毕业论文致谢词
2015/05/14 职场文书