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 相关文章推荐
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
javascript中的this详解
Dec 08 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
Angular网络请求的封装方法
May 22 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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创建基本身份认证站点的方法详解
2013/06/08 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
详解python配置虚拟环境
2019/04/08 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
工作交流会欢迎词
2014/01/12 职场文书
参观接待方案
2014/03/17 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
离婚起诉书范本
2015/05/18 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
python中tkinter复选框使用操作
2021/11/11 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android