<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .countdown { width: 240px; height: 305px; text-align: center; line-height: 1; color: #fff; background-color: brown; /* background-size: 240px; */ /* float: left; */ overflow: hidden; } .countdown .next { font-size: 16px; margin: 25px 0 14px; } .countdown .title { font-size: 33px; } .countdown .tips { margin-top: 80px; font-size: 23px; } .countdown small { font-size: 17px; } .countdown .clock { width: 142px; margin: 18px auto 0; overflow: hidden; } .countdown .clock span, .countdown .clock i { display: block; text-align: center; line-height: 34px; font-size: 23px; float: left; } .countdown .clock span { width: 34px; height: 34px; border-radius: 2px; background-color: #303430; } .countdown .clock i { width: 20px; font-style: normal; } </style> </head> <body> <div class="countdown"> <p class="next">今天是2023年4月24日</p> <p class="title">下课倒计时</p> <p class="clock"> <span id="hour">00</span> <i>:</i> <span id="minutes">25</span> <i>:</i> <span id="scond">20</span> </p> <p class="tips"> 现在是09:00:00 </p> </div> <script> </script> </body> </html>补全以上代码
时间: 2024-02-10 07:07:10 浏览: 81
HTML中的<meta>标签的使用详解
5星 · 资源好评率100%
可以用 JavaScript 实现倒计时功能。可以在 `<script>` 标签中添加以下代码:
```
// 设置倒计时结束时间,这里设置为今天下午 5 点
const endTime = new Date().setHours(17, 0, 0);
// 获取倒计时显示元素
const hourEl = document.getElementById('hour');
const minuteEl = document.getElementById('minutes');
const secondEl = document.getElementById('scond');
// 更新倒计时显示
function updateCountdown() {
const currentTime = new Date().getTime();
const remainingTime = endTime - currentTime;
// 计算剩余时间的小时、分钟、秒
const hours = Math.floor(remainingTime / (1000 * 60 * 60));
const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
// 更新倒计时显示
hourEl.textContent = hours.toString().padStart(2, '0');
minuteEl.textContent = minutes.toString().padStart(2, '0');
secondEl.textContent = seconds.toString().padStart(2, '0');
}
// 更新倒计时显示
updateCountdown();
// 每秒钟更新一次倒计时显示
setInterval(updateCountdown, 1000);
```
将 JavaScript 代码添加到 `<script>` 标签中即可实现倒计时功能。
阅读全文