秒表部分功能实现解析
// 开始或暂停计时器的方法
startOrPauseTimer() {
if (this.isStarted) {
// 如果计时器已经启动,暂停计时器
clearInterval(this.interval)
this.lastTimeElapsed = Date.now() - this.startTime + this.lastTimeElapsed
this.startPauseButtonText = '开始'
} else {
// 如果计时器未启动,开始计时器
this.startPauseButtonText = '暂停'
this.startTime = Date.now()
this.interval = setInterval(() => {
// 每 100 毫秒更新已经过时间
this.timeElapsed = Date.now() - this.startTime + this.lastTimeElapsed
}, 100)
}
// 切换计时器状态
this.isStarted = !this.isStarted
}
实现了计时器的开始和暂停功能,通过检查计时器的当前状态来决定是启动还是暂停计时器。每次调用方法时都会切换计时器状态,并更新相关的时间和按钮文本,以提供直观的用户界面体验。
检查计时器状态
首先,方法检查 this.isStarted
的值,以确定计时器当前是启动状态还是暂停状态。
2. 如果计时器已经启动
如果 this.isStarted
为 true
,表示计时器正在运行,此时需要暂停计时器:
- 调用
clearInterval(this.interval)
清除定时器。 - 计算已经过的时间,并将其累加到
this.lastTimeElapsed
中:Date.now() - this.startTime
计算出当前启动后已经过的时间,加上之前已经累计的时间。 - 将按钮文本设置为 "开始":
this.startPauseButtonText = '开始'
。
3. 如果计时器未启动
如果 this.isStarted
为 false
,表示计时器未在运行,此时需要启动计时器:
- 将按钮文本设置为 "暂停":
this.startPauseButtonText = '暂停'
。 - 记录当前时间为计时器的开始时间:
this.startTime = Date.now()
。 - 使用
setInterval
创建一个定时器,每 100 毫秒更新this.timeElapsed
:this.timeElapsed = Date.now() - this.startTime + this.lastTimeElapsed
计算出自计时器启动以来的总时间,包括之前已经累计的时间。
4. 切换计时器状态
最后,将 this.isStarted
的值取反,以便下次调用该方法时执行相反的操作:this.isStarted = !this.isStarted
。
// 重置计时器的方法
resetTimer() {
this.timeElapsed = 0
this.lastTimeElapsed = 0
this.isStarted = false
this.startPauseButtonText = '开始'
clearInterval(this.interval)
}
实现了重置计时器的功能,通过将相关属性重置为初始状态,清零计时器的已累计时间,并确保定时器被清除,使得计时器可以重新从零开始计时。
resetTimer()
方法有以下功能:
- 将
this.timeElapsed
和this.lastTimeElapsed
设置为 0,即清零计时器的已累计时间。 - 将
this.isStarted
设置为false
,表示计时器未在运行。 - 将按钮文本设置为 "开始":
this.startPauseButtonText = '开始'
。 - 调用
clearInterval(this.interval)
清除定时器,确保计时器被完全重置。
// 格式化已经过时间为分钟:秒钟:毫秒的字符串
formatElapsedTime() {
var minutes = this.convertNumberToStr(this.timeElapsed / 1000 / 60)
var seconds = this.convertNumberToStr(this.timeElapsed / 1000 % 60)
var milliSeconds = this.convertNumberToStr(this.timeElapsed % 1000)
var minutesStr = minutes.padStart(2, '0')
var secondsStr = seconds.padStart(2, '0')
var milliSecondsStr = milliSeconds.padStart(3, '0')
return `${minutesStr}:${secondsStr}:${milliSecondsStr}`
}
实现了将已经过的时间(以毫秒为单位)格式化为分钟:秒钟:毫秒的字符串格式。
-
时间单位转换:
this.timeElapsed / 1000 / 60
:将总毫秒数转换为分钟数。this.timeElapsed / 1000 % 60
:计算总毫秒数转换为秒数后的余数,即剩余的秒数。this.timeElapsed % 1000
:获取总毫秒数除以1000的余数,即剩余的毫秒数。
-
数值转换为字符串:
this.convertNumberToStr()
:这是一个辅助函数(不在提供的代码中),用于将数字转换为字符串。通常,这个函数用来确保数字格式正确,例如补零到指定的位数。
-
补零操作:
padStart()
方法用于确保分钟、秒钟和毫秒都显示为两位数或三位数,并在不足指定位数时在左侧填充零。
-
字符串拼接:
return
𝑚𝑖𝑛𝑢𝑡𝑒𝑠𝑆𝑡𝑟:minutesStr:{secondsStr}:${milliSecondsStr}``:将格式化后的分钟、秒钟和毫秒字符串拼接成最终的时间格式字符串。
// 将数字转换为两位或三位的字符串表示
convertNumberToStr(num: number) {
return parseInt(num + "").toString()
}
实现了数字的格式转化为三位字符串的功能