Products
GG网络技术分享 2025-03-18 16:13 0
JS秒表计次可以说非常考验一个人的思维，当然实现方法有多种。
思路分析，将一个为00:00:00的字符串放入<span>标签，通过JS将字符串分解成三个部分的数值，分钟、秒、毫秒（当然这个案例将1秒拆成60个更小单位组成的），然后每次满60就向前进一，然后在网页中加入了“计次”、“暂停”、“继续”、“重置”等功能。
参考代码：
内容部分：
样式部分：
styl1
style2
JS部分：
JS1
JS2
注意：JS最后部分写了一种替代重置办法，这种办法就是重新加载当前网页（相当于网页刷新），这里不提倡采用这种办法，如果网页中还有其他的参数也会被重置，估计用这种方法会被leader锤死。
实际效果：
对前端感兴趣的小伙伴记得关注小编，每天都会更新前端的一些小技巧。没点赞的小伙伴记得点赞收藏哦，谢谢大家！
想要实现一个简单的秒表，点击启动按钮时开始计时，随后启动按钮变为暂停，点击暂停暂停计时，点击复位回到最初始状态。今天就分享一个使用JavaScript实现简单的秒表效果。
效果：
JavaScript代码如下：
<!DOCTYPE html><html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Title</title>
<style>
#showTime
{
width: 300px;
height: 60px;
font-size: 60px;
line-height: 60px;
}
</style>
</head>
<body>
<div>
<div id=\"showTime\">00:00:00</div>
<button id=\"startBn\">启动</button>
<button id=\"restBn\">复位</button>
</div>
<script>
//——————
var time,showTime,startBn,restBn,pauseDate;
//布尔开关
var bool=false;
//暂停的累计时间
var pauseTime=0;
init();
function init() {
showTime=document.getElementById(\"showTime\");
startBn=document.getElementById(\"startBn\");
restBn=document.getElementById(\"restBn\");
startBn.addEventListener(\"click\",clickHandler);//开始按钮 ~ 暂停按钮
restBn.addEventListener(\"click\",clickHandler);//复位按钮
setInterval(animation,16);
}
//转化时间函数
function animation() {
if(!bool) return;
//前时间减去上次开启时间减去暂停累计时间
var times=new Date().getTime()-time-pauseTime;
var minutes=Math.floor(times/60000);//毫秒转化为分钟
var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟
将time减去分钟 除去1000得出 秒
var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//
showTime.innerHTML=
(minutes<10 ? \"0\" +minutes : minutes)+\":\"
+(seconds<10 ? \"0\"+seconds :seconds)+\":\"
+(ms<10 ? \"0\"+ms : ms);
}
//点击时的事件
function clickHandler(e) {
e= e || window.event;
if(this===startBn){
bool=!bool;
if(bool){
this.innerHTML=\"暂停\";
//如果我们上一次暂停时间是空，表示没有暂停过，因此，直接返回0
//如果上次的暂停时间是有值得，用当前毫秒数减去上次的毫秒数，这样就会得到暂停时间
pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate);
if(time) return;
time=new Date().getTime();
return;//是为bool判断跳出
}
this.innerHTML=\"启动\";
pauseDate=new Date().getTime();
return;//是为this是否等于startBn判断跳出
}
startBn.innerHTML=\"启动\";
pauseTime=0;
pauseDate=null;
bool=false;
time=0;
showTime.innerHTML=\"00:00:00\";
}
</script>
</body>
</html>
以上就是使用JavaScript实现简单的秒表效果方法。
Demand feedback
