生成一个html+js的计时器小工具,要求到规定时间后自动播放一首音乐
时间: 2024-02-11 09:09:25 浏览: 24
好的,我可以为您生成一个 HTML+JS 的计时器小工具,以下是代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>计时器小工具</title>
</head>
<body>
<h1>计时器小工具</h1>
<p>请输入计时器时间(分钟):</p>
<input type="number" id="timerValue" min="1" max="120" step="1">
<button onclick="startTimer()">开始计时</button>
<button onclick="stopTimer()">停止计时</button>
<audio id="audio" src="https://xxx.xxx/xxx.mp3"></audio>
<script>
var countdownTimer;
function startTimer() {
var timerValue = document.getElementById("timerValue").value;
var seconds = timerValue * 60;
countdownTimer = setInterval(function() {
var minutes = Math.floor(seconds / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById("timerValue").value = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById("audio").play();
} else {
seconds--;
}
}, 1000);
}
function stopTimer() {
clearInterval(countdownTimer);
document.getElementById("timerValue").value = "";
document.getElementById("audio").pause();
document.getElementById("audio").currentTime = 0;
}
</script>
</body>
</html>
```
在这个小工具中,我们用一个 input 标签来输入计时器时间,然后用两个 button 标签来控制计时器的开始和停止。在开始计时时,我们使用 setInterval 函数来每隔一秒钟更新计时器的值,并判断是否到达规定时间,如果到达规定时间,则清除计时器并播放音乐。在停止计时时,我们清除计时器并重置计时器和音乐的状态。需要注意的是,音乐文件的链接需要替换为您自己的链接。同时,我们也将计时器的时间格式化为“分:秒”的形式。