作者:廖汉林1026_843 | 来源:互联网 | 2021-11-12 18:14
本文实例为大家分享了Javascript实现秒表计时的具体代码,供大家参考,具体内容如下
实现图片:
分+秒+跑秒
时+分+秒+跑秒
需求分析:
1、显示整个秒表页面;
2、在点击“开始”按钮之后,开始计时,并将按钮转为“暂停”按钮,在点击“暂停”按钮之后,将按钮转为“开始”按钮,并停止计时;
3、在点击“复位”按钮之后,将显示的计时清零,并将按钮变回“开始”按钮。
页面结构:
页面的主体结构主要包括四个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”
完整代码,复制可用:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。