用JS制作一个简单的秒表

最新推荐文章于 2022-03-28 14:44:47 发布
最新推荐文章于 2022-03-28 14:44:47 发布
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44211323/article/details/91356197
本文介绍了如何使用JavaScript编写一个简单的秒表。通过定义必要的变量，结合开始和暂停按钮的状态判断，以及毫秒级的定时器，实现了秒表的计时、暂停和重置功能。在点击开始和暂停按钮时，根据图标类名切换状态，并计算时间差以更新页面显示的时间。最后，通过重置按钮清除所有数据，恢复初始状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

时间与我们生活息息相关，在日常生活中人们总以时间作为参考点对一些事情进行评比，例如各种运动就是通过选手们完成时间的多少进行排名的。而这些时间的计算往往就是依靠比较精准的秒表。现在我就为大家介绍一下如何用JS代码编写一个简单的秒表。

    页面代码很简单，通过两按钮和一个装时间的div组成，代码和页面就在这下面，可以参考一下。

    在编写功能之前要先定义几个必须要使用到的变量，一共四个，每次点击开始的时间、每次点击暂停的时间、运行总时间、计时器。变量需要在方法外面定义，方便全局使用。

    前面三个时间时计算秒显示到页面上的时间的必要数据，因为可以点击暂停和开始，这样中途可能会停留一段时间，如果不经过计算就会出现时间数据的不准确。从页面的代码可以看到，开始和暂停是同一个按钮，每次点击就会更换不同的功能。在这里是通过图标来判断是处于开始状态还是暂停状态。图标用的是layui里面的，如果i标签里有layui-icon-play这个类名就说明是处于暂停状态，如果有layui-icon-pause这个类名就说明是处于开始状态。这两个类名其实就是开始和暂停的样式。layui-icon-play是开始，layui-icon-pause是暂停。

 

 

 

当点击的开始结束按钮时，判断一下i标签里是否有layui-icon-play这个类名，如果有就说明点击前是属于暂停状态的现在需要变成开始状态，并且开始计时，就可以把layui-icon-play移除掉，添加layui-icon-pausess，否则如果没有就说明点击前是属于开始状态的现在需要变成暂停状态，并且结束计时，同样的需要把类名更换掉，只不过是反过来了，把layui-icon- pausess移除掉，添加layui-icon-play。

把样式转换了之后就要开始计算时间，计算时间前要判断点击暂停时的时间是否是大于0的，如果没有大于0就说明是第一次点击，所以运行的总时间是0，可以不做操作直接开始调用定时器。如果大于0就说明已经是暂停过一次以上了，总时间需要把暂停时的时间减去开始时的时间，得出上一次运行的总时间，然后依次累加计算出从一开始到现在的总运行时间。然后再获取当前点击的时间开始调用定时器。因为秒表的计算是精准到毫秒的，所以调用定时器时的间隔时间为一毫秒。

然后就是定时器调用的方法内容了，一进入到该方法时首先就要获取到当前时间，然后再用当前的时间减去开始的时间加上总时间，就能计算出本次的总时间了，再用这个时间计算出分钟、秒钟、毫秒等等。

       最后就处理字符，判断是否大于0，如果小于就把显示的文本设置为00，因为毫秒有三位数，所以设置为000。

       还有一个按钮就是重置，把所有的数据全部清空，恢复原样。

 

教你用JS手写简单的秒表（精确到10ms，没有延迟）
明月如霜丶
10-24 3272
制作秒表的思路如下： 1、首先定出功能以及界面。 我的目的是做最简单的秒表，因此只需要开始、结束以及清零的功能。界面如下图所示： 未开始运行： 运行中：　　 2、构思实现的方式。 首先，核心方法肯定是 setInterval() 方法，用于周期性地显示时间。 因为我要精确到10ms， 所以设置时间间隔为10。 再者，如何令时间递增？ A . 我开始想到的是设置变量 milliSeconds、sec...
html做秒表代码,利用JS实现一个可精确到10ms的秒表的制作（附代码）
weixin_30258621的博客
06-08 1382
本篇文章给大家带来的内容是关于利用JS实现一个可精确到10ms的秒表的制作(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。这段时间刚接触js，想利用所学的知识自制一款简单的秒表。制作秒表的思路如下：1、首先定出功能以及界面。我的目的是做最简单的秒表，因此只需要开始、结束以及清零的功能。界面如下图所示：未开始运行：运行中：2、构思实现的方式。首先，核心方法肯定是 setIn...
JS实现秒表
Hedia Pan的博客
08-25 542
<!DOCTYPE html> <html lang="zn"> <head> 　　<meta charset="UTF-8"> 　　<title>秒表</title> 　　<style> .contain{ width: 200px; height: 50px; background: #000; b.
js做秒表
xiaowu_1997的博客
04-15 640
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> <input type="text" id="hours" value="00"/> <input ty...
用JS实现一个秒表功能
wang_swa99er的博客
08-20 817
用JS实现一个秒表功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl
javascript实现秒表计时器的制作方法
01-19
本文实例为大家分享了js秒表计时器的制作代码，供大家参考，具体内容如下 具体代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=gb2312> <title>Document</title> &...
stopwatchjs:使用HTML，CSS和JavaScript制作的简单秒表
03-31
本文将详细介绍如何使用HTML、CSS和JavaScript这三种基础的Web技术来创建一个简单的秒表应用。 首先，我们需要理解HTML（HyperText Markup Language）用于构建网页结构，CSS（Cascading Style Sheets）负责样式设计...
纯js 写一个秒表 （精确到毫秒）
WWWSENMU的博客
03-28 1623
思路：时、分、秒、毫秒，每一个都分别分成两个，把获取到的时间分成两个数，再由数字去对应图片 大概样式展示： 全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"...
用js写一个小秒表
努力做一名会做饭的程序员
02-15 399
用js写一个小秒表 复制直接可用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日期,制作秒表</title> <style> .clock{ width:300px; height: 50px; ...
js实现简单的秒表
10-15
主要为大家详细介绍了js实现简单的秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript秒表制作
10-30
使用javascript制作计时秒表，很好用，点击开始开始计时，点击暂停计时停止
51单片机简易秒表的设计(仿真图、程序)
12-23
1.一个精度为0.1s的秒表系统。 2.有启动按钮、暂停按钮及清零按钮。 3每到一秒钟有声音提醒功能，可通过按钮打开及关闭该提醒音。 压缩包中包含proteus仿真图、hex文件和C语言源代码，代码中写有详尽的注释，一看就能懂
用JS实现一个秒表计时器
热门推荐
gao000000的博客
04-08 3万+
秒表计时器的实现： 效果图如下： 附代码，已调试运行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
js 可以记录的秒表，图片秒表的制作
weixin_56211720的博客
11-02 2391
今天做了一个可以记录的秒表，大家可以一起来看看。 我的这个有一部分的用带有0到9的图片替换了数字0到9，有兴趣的小伙伴可以到网上找相关的图片，0到9命名方法是 0到9.jpg 。 6.html <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> </head> ...
JavaScript制作简单计时器
SoulArbiter的博客
05-05 1089
无聊写了一个简单的计时器demo，比较适合入门学习。 代码如下： JS： var btn=document.getElementById("btn"); btn.onclick=function(){ this.disabled=true; //设置input为可编辑状态 var that=this; //因为在函数 f()内 通过this 获取不到btn这个按钮 故需在外部定义词法环境
使用JS写秒表
weixin_45065907的博客
07-02 181
/* 写的不太对，还有问题没有解决 */ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>秒表</title> </head> <body> <input id="myButton" type="button" value="开始" onclick="fun()"><input id
用js写一个秒表
weixin_30316097的博客
11-13 134
首先，先铺好格式 <input type="text" name="" id="shuzi" value="00:00:00" /><br /> <input onclick="ks()" type="button" name="" id="kaishi" value="开始" /> <input onclick="zt()" typ...
Flex制作简易秒表教程
Flex计时器和秒表是使用Adobe Flex框架结合Adobe AIR技术实现的一个简单的秒表应用程序。该程序允许用户进行计时功能，例如开始、暂停、继续和重置计时器。该案例对于初学者来说是一个很好的学习示例，尤其是那些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值