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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
vue的webcamjs集成方式
Nov 16 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连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
PDO::prepare讲解
2019/01/29 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
JS中表单的使用小结
2014/01/11 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python strip lstrip rstrip使用方法
2008/09/06 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
python实现控制台输出彩色字体
2020/04/05 Python
Python实现简单的2048小游戏
2021/03/01 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
求职信范文英文版
2014/01/05 职场文书
护理目标管理责任书
2014/07/25 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
回复函范文
2015/07/14 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS