html制作毕业倒计时
时间: 2024-06-26 07:01:15 浏览: 6
HTML可以用来制作简单的毕业倒计时计时器,通常会配合JavaScript使用来动态更新剩余的时间。以下是一个基本的步骤和代码示例:
1. 创建HTML结构:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>毕业倒计时</title>
<style>
#countdown {
font-size: 36px;
text-align: center;
}
</style>
</head>
<body>
<div id="countdown">毕业倒计时:<span id="days"></span>天 <span id="hours"></span>小时 <span id="minutes"></span>分钟 <span id="seconds"></span>秒</div>
<script src="countdown.js"></script>
</body>
</html>
```
2. 创建JavaScript文件(countdown.js):
```javascript
window.onload = function() {
var endDate = new Date('2023-07-31'); // 指定毕业日期,格式为 'YYYY-MM-DD'
var now = new Date();
function updateCountdown() {
var distance = endDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
if (distance < 0) {
clearInterval(intervalId);
alert("毕业日已过,恭喜毕业!");
} else {
intervalId = setInterval(updateCountdown, 1000); // 每秒更新一次
}
}
updateCountdown();
};
```
相关推荐
![html](https://img-home.csdnimg.cn/images/20210720083451.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)