<script setup lang="ts">
import { Redo, StopwatchStart, Config } from '@icon-park/vue-next';
import { onMounted, ref } from 'vue';
import convertMinutesToHMS from '../src/utils/convertMinutesToHMS.ts';
//秒数
let countdown = ref<number>(0)
let minutes = ref<number>(0)
const audio = new Audio('/public/军旅歌曲 - 起床号.mp3');
const isCounting = ref(false); // 倒计时状态
const showText = ref()
const dialogVisible = ref(false)
onMounted(() => {
countdown.value = minutes.value * 60
showText.value = convertMinutesToHMS(countdown.value)
})
const refresh = () => {
countdown.value = 0
isCounting.value = false
audio.pause();
audio.currentTime = 0;
showText.value = convertMinutesToHMS(countdown.value)
}
const setting = () => {
isCounting.value = false
dialogVisible.value = true
}
const ok = () => {
dialogVisible.value = false
countdown.value = minutes.value * 60
showText.value = convertMinutesToHMS(countdown.value)
}
const start = () => {
isCounting.value = true;
const countdownTimer = () => {
if (isCounting.value === true && countdown.value != 0) {
countdown.value--;
showText.value = convertMinutesToHMS(countdown.value);
if (countdown.value === 0) {
showText.value = '倒计时结束'
audio.play();
isCounting.value = false;
} else {
setTimeout(countdownTimer, 1000);
}
}
};
countdownTimer();
}
</script>
<template>
<div>
<span id='showText'>{{ showText }}</span>
<span class="refresh">
<redo @click="refresh" class="redo" theme="outline" size="20" fill="#f5a623" style="margin-right: 10px;" />
</span>
<span class="refresh"><stopwatch-start @click="start" theme="outline" size="20" fill="#f5a623"
style="margin-right: 10px;" /></span>
<span class="refresh">
<config theme="outline" size="20" fill="#f5a623" @click="setting" />
</span>
<el-dialog v-model="dialogVisible" width="100%" height="30px">
<template #footer>
<span class="dialog-footer">
<el-input v-model.number="minutes" placeholder="请输入分钟数"></el-input>
<el-button type="primary" @click="ok">
确定
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<style scoped>
.refresh:hover {
cursor: pointer;
}
#showText {
font-family: Arial, sans-serif;
font-size: 24px;
color: orange;
text-align: center;
line-height: 50px;
margin-right: 10px;
}
</style>
electron倒计时程序
最新推荐文章于 2024-06-12 09:50:06 发布