微客导航 » 文章资讯 » javascript实现一款好看的秒表计时器

javascript实现一款好看的秒表计时器

2023-07-17 04:13:03 210

本文实例为大家分享了javascript实现秒表计时的具体代码，供大家参考，具体内容如下

实现图片：

分+秒+跑秒

时+分+秒+跑秒

需求分析：

1、显示整个秒表页面；

2、在点击“开始”按钮之后，开始计时，并将按钮转为“暂停”按钮，在点击“暂停”按钮之后，将按钮转为“开始”按钮，并停止计时；

3、在点击“复位”按钮之后，将显示的计时清零，并将按钮变回“开始”按钮。

页面结构：





00:
00 
00


开始
复位

页面的主体结构主要包括四个span，包含四个秒表上显示的时间；以及两个按钮：“开始/暂停”与“复位”按钮。

一些函数：

id节点调用函数

functionjieDian(id){
returndocument.getElementById(id);
}

通过调用此函数可以简化页面代码

开始运行函数

functionstartBtn(){
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)
}
//开始运行函数

暂停函数

functionpasueBtn(){
clearInterval(timer1)
}

赋0函数

functiondoubleLing(i){
if(i<10){
return"0"+i
}else{
returni
}
}
//赋0函数，当时分秒显示为个位数时，在前面加上“0”

完整代码，复制可用：






Document






00:
00:
00 
00


开始
复位

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

javascript实现一款好看的秒表计时器

热门推荐

随机推荐