html 实现10分钟的时钟倒计时 最后1分钟有声音提醒 倒计时颜色标红
时间: 2024-05-12 08:18:26 浏览: 10
可以使用JavaScript编写代码来实现该功能。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>倒计时</title>
<style>
body {
text-align: center;
background-color: #fff;
font-size: 48px;
color: #000;
}
#countdown {
color: green;
}
#countdown.warning {
color: red;
}
</style>
</head>
<body>
<div id="countdown">10:00</div>
<script>
function countdown() {
var minutes = Math.floor(time / 60);
var seconds = time % 60;
// Add leading zero to seconds if necessary
seconds = seconds < 10 ? "0" + seconds : seconds;
// Update countdown element
var countdownElement = document.getElementById("countdown");
countdownElement.innerHTML = minutes + ":" + seconds;
// Play sound if time is up
if (time <= 60) {
countdownElement.classList.add("warning");
if (!soundPlayed) {
alert("时间到!");
soundPlayed = true;
}
}
// Decrement time
time--;
// Call function again after 1 second
setTimeout(countdown, 1000);
}
// Set countdown time in seconds
var time = 600;
// Sound played flag
var soundPlayed = false;
// Start countdown
countdown();
</script>
</body>
</html>
```
该代码将在页面中创建一个倒计时器,并在倒计时进行的过程中更新倒计时器的计时。在最后一分钟内,倒计时器的颜色将变为红色,并将播放声音提醒用户时间快到了。
希望能帮到你!
相关推荐
![](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)