高考倒计时代码html
时间: 2023-06-30 22:22:24 浏览: 54
我可以提供一个简单的倒计时代码HTML,你可以根据需要进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<title>高考倒计时</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
h1 {
font-size: 48px;
color: #333;
text-align: center;
margin-top: 50px;
}
.countdown {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
font-size: 36px;
color: #555;
}
.countdown span {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 10px;
text-align: center;
}
.countdown span:first-child {
border-right: 2px solid #ccc;
padding-right: 10px;
}
.countdown span:last-child {
border-left: 2px solid #ccc;
padding-left: 10px;
}
@media screen and (max-width: 768px) {
h1 {
font-size: 36px;
}
.countdown {
font-size: 24px;
}
}
</style>
</head>
<body>
<h1>高考倒计时</h1>
<div class="countdown">
<span id="day"></span>
<span id="hour"></span>
<span id="minute"></span>
<span id="second"></span>
</div>
<script type="text/javascript">
const countdown = () => {
const now = new Date();
const examDate = new Date("2021-06-07T09:00:00+08:00"); // 修改为高考日期
const diff = examDate - now;
if (diff <= 0) {
document.getElementById("day").textContent = "0";
document.getElementById("hour").textContent = "0";
document.getElementById("minute").textContent = "0";
document.getElementById("second").textContent = "0";
return;
}
const day = Math.floor(diff / (24 * 60 * 60 * 1000));
const hour = Math.floor((diff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
const minute = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000));
const second = Math.floor((diff % (60 * 1000)) / 1000);
document.getElementById("day").textContent = day;
document.getElementById("hour").textContent = hour.toString().padStart(2, "0");
document.getElementById("minute").textContent = minute.toString().padStart(2, "0");
document.getElementById("second").textContent = second.toString().padStart(2, "0");
setTimeout(countdown, 1000);
};
countdown();
</script>
</body>
</html>
```
在代码中,我们使用了JavaScript来计算倒计时,并使用了CSS来进行页面样式的设置。你可以根据需要进行修改,比如修改高考日期、修改页面样式等等。
相关推荐
![](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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)