生成一个html+js的计时器小工具,要求到规定时间后自动响铃
时间: 2024-02-11 09:09:49 浏览: 32
好的,我可以为您生成一个简单的计时器小工具。以下是HTML和JavaScript代码:
```
<!DOCTYPE html>
<html>
<head>
<title>计时器</title>
</head>
<body>
<h1>计时器</h1>
<label for="minutes">分钟数:</label>
<input type="number" id="minutes" min="1" max="60" value="1">
<br><br>
<button onclick="startTimer()">开始计时</button>
<br><br>
<p id="timer"></p>
<audio id="alarm">
<source src="alarm.mp3" type="audio/mpeg">
</audio>
<script>
var timer;
function startTimer() {
var minutes = document.getElementById("minutes").value;
var seconds = minutes * 60;
var display = document.getElementById("timer");
timer = setInterval(function() {
var minutesLeft = Math.floor(seconds / 60);
var secondsLeft = seconds % 60;
if (secondsLeft < 10) {
secondsLeft = "0" + secondsLeft;
}
display.innerHTML = minutesLeft + ":" + secondsLeft;
seconds--;
if (seconds < 0) {
clearInterval(timer);
document.getElementById("alarm").play();
}
}, 1000);
}
</script>
</body>
</html>
```
它包括一个文本框用于输入分钟数,一个按钮用于开始计时,一个显示计时器的区域以及一个隐藏的音频元素用于播放铃声。
当用户点击“开始计时”按钮时,JavaScript代码将获取输入的分钟数,并将其转换为秒数。然后,它将设置一个定时器,在每秒钟更新计时器的显示,并将剩余秒数减少1。如果剩余秒数为0,它将清除定时器并播放铃声。
请注意,为了使铃声播放正常,您需要将一个名为“alarm.mp3”的音频文件放置在与HTML文件相同的目录中。