实现开始、暂停、继续、复位4个按钮的功能 秒表记时精确到分和秒,如90秒显示1分30秒 实现在输入框指定总秒数,到指定时间自动停止计时的功能,在计时过程中,另一个输入框显示剩余时间
时间: 2024-03-10 11:47:40 浏览: 31
以下是一个实现秒表记时的示例代码,包括开始、暂停、继续、复位4个按钮的功能和自动停止计时的功能,以及显示剩余时间的功能。
```html
<template>
<div>
<div>
<span>计时:</span>
<span>{{ formatTime(elapsedTime) }}</span>
</div>
<div>
<span>剩余时间:</span>
<span>{{ formatTime(remainingTime) }}</span>
</div>
<div>
<label>总秒数:</label>
<input type="number" v-model="totalSeconds" @input="resetTimer">
</div>
<div>
<button @click="startTimer" :disabled="isRunning">开始</button>
<button @click="pauseTimer" :disabled="!isRunning">暂停</button>
<button @click="resumeTimer" :disabled="isRunning || !isPaused">继续</button>
<button @click="resetTimer" :disabled="isRunning">复位</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
totalSeconds: 60,
elapsedTime: 0,
remainingTime: 0,
timerId: null,
isRunning: false,
isPaused: false
}
},
methods: {
startTimer() {
if (this.isPaused) {
// 继续计时
this.isPaused = false;
} else {
// 开始计时
this.elapsedTime = 0;
this.remainingTime = this.totalSeconds;
}
this.timerId = setInterval(() => {
this.elapsedTime++;
this.remainingTime = this.totalSeconds - this.elapsedTime;
if (this.remainingTime <= 0) {
this.stopTimer();
}
}, 1000);
this.isRunning = true;
},
pauseTimer() {
clearInterval(this.timerId);
this.isRunning = false;
this.isPaused = true;
},
resumeTimer() {
this.startTimer();
},
stopTimer() {
clearInterval(this.timerId);
this.isRunning = false;
this.isPaused = false;
},
resetTimer() {
this.stopTimer();
this.elapsedTime = 0;
this.remainingTime = this.totalSeconds;
},
formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${minutes < 10 ? '0' : ''}${minutes}:${secs < 10 ? '0' : ''}${secs}`;
}
},
watch: {
totalSeconds(value) {
this.resetTimer();
}
},
created() {
this.resetTimer();
}
}
</script>
```
以上代码使用了Vue.js框架来实现秒表计时的功能,其中包含了开始、暂停、继续、复位4个按钮的功能和自动停止计时的功能,以及显示剩余时间的功能。其中,计时精确到分和秒,输入框指定总秒数后,到指定时间自动停止计时,另一个输入框显示剩余时间。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)