<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>补全以上的JavaScript代码
时间: 2023-11-16 17:10:56 浏览: 427
2023年新年倒计时html源码
可以使用以下代码实现下课倒计时:
```
<script>
// 获取倒计时元素
const hourEl = document.getElementById('hour')
const minuteEl = document.getElementById('minutes')
const secondEl = document.getElementById('scond')
// 设定下课时间(24小时制)
const hour = 14
const minute = 25
const second = 0
// 更新倒计时函数
function updateCountdown() {
// 获取当前时间
const now = new Date()
const currentHour = now.getHours()
const currentMinute = now.getMinutes()
const currentSecond = now.getSeconds()
// 计算剩余时间
let remainingHour = hour - currentHour
let remainingMinute = minute - currentMinute
let remainingSecond = second - currentSecond
// 处理时间不足的情况
if (remainingSecond < 0) {
remainingSecond += 60
remainingMinute -= 1
}
if (remainingMinute < 0) {
remainingMinute += 60
remainingHour -= 1
}
if (remainingHour < 0) {
remainingHour += 24
}
// 更新倒计时元素
hourEl.innerText = remainingHour.toString().padStart(2, '0')
minuteEl.innerText = remainingMinute.toString().padStart(2, '0')
secondEl.innerText = remainingSecond.toString().padStart(2, '0')
}
// 初次更新倒计时
updateCountdown()
// 每秒更新倒计时
setInterval(updateCountdown, 1000)
</script>
```
其中,倒计时元素的 HTML 结构如下:
```
<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>
```
其中,`hour`、`minutes`、`scond` 分别是小时、分钟和秒数的元素 ID。可以根据实际需要进行修改。
阅读全文