{{ formatTime(remainingTime) }}

倒计时总时长 (分钟):

提醒间隔 (1-5分钟):
{{ intervalOptions[intervalIndex] }} 分钟

背景音乐:

开始闹钟
停止/重置

export default {
data() {
return {
duration: 10, // 总时长（分）
remainingTime: 600, // 剩余时间（秒）
intervalOptions: [1, 2, 3, 4, 5],
intervalIndex: 0, // 默认1分钟提醒一次
isRunning: false,
useBgMusic: true,
timer: null,
bgAudio: null,
alertAudio: null,
lastRemindTime: 0 // 上次提醒时的剩余时间
};
},
onLoad() {
// 初始化音频实例
this.bgAudio = uni.createInnerAudioContext();
this.bgAudio.src = '/static/bg_music.mp3';
this.bgAudio.loop = true;
this.alertAudio = uni.createInnerAudioContext();
this.alertAudio.src = '/static/alert_tone.mp3';
},
methods: {
onIntervalChange(e) {
this.intervalIndex = e.detail.value;
},
formatTime(seconds) {
const m = Math.floor(seconds / 60);
const s = seconds % 60;
return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
},
startTimer() {
this.remainingTime = this.duration * 60;
this.lastRemindTime = this.remainingTime;
this.isRunning = true;
// 播放背景音乐
if (this.useBgMusic) {
this.bgAudio.play();
}
this.timer = setInterval(() => {
if (this.remainingTime > 0) {
this.remainingTime--;
this.checkIntervalRemind();
} else {
this.handleFinish();
}
}, 1000);
},
checkIntervalRemind() {
const intervalSeconds = this.intervalOptions[this.intervalIndex] * 60;
// 如果距离上次提醒过去了设定的间隔
if (this.lastRemindTime - this.remainingTime >= intervalSeconds) {
this.alertAudio.play();
this.lastRemindTime = this.remainingTime;
uni.showToast({ title: '间隔提醒', icon: 'none' });
}
},
handleFinish() {
this.stopTimer();
this.alertAudio.play(); // 播放结束铃声
uni.showModal({
title: '时间到',
content: '闹钟已结束',
showCancel: false
});
},
stopTimer() {
clearInterval(this.timer);
this.timer = null;
this.isRunning = false;
this.bgAudio.stop(); // 停止背景音乐
}
},
onUnload() {
// 页面销毁释放资源
if (this.bgAudio) this.bgAudio.destroy();
if (this.alertAudio) this.alertAudio.destroy();
}
};

.container { padding: 30px; }
.timer-display { font-size: 60px; text-align: center; margin: 40px 0; font-family: monospace; color: #333; }
.settings { background: #f8f8f8; padding: 15px; border-radius: 10px; }
.item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
input { width: 60px; border-bottom: 1px solid #ccc; text-align: center; }
.picker-text { color: #007AFF; font-weight: bold; }
.controls { margin-top: 30px; }