静态界面——倒计时-编程知识

静态界面——倒计时

功能代码
界面展示

功能代码

<!DOCTYPE html>
<html><head><title>倒计时</title><style>body {font-family: Arial, sans-serif;text-align: center;}h1 {font-size: 80px;color: #ff0000;line-height: 40vh;}.topStyle {color: #fff;font-size: 60px;line-height: 20vh;background-color: #42958b;}.bottomStyle {font-size: 60px;line-height: 20vh;font-style: italic}</style></head><body style="text-align: center;"><div class="topStyle">标题</div><h1 id="countdown">剩余时间</h1><script>// 定义截至时间点var examDate = "2024-03-16 09:00:00";// 获取当前时间var now = new Date().getTime();// 获取所剩时间var countdownDate = new Date(examDate).getTime() - now;function updateCountdown() {var days = Math.floor(countdownDate / (1000 * 60 * 60 * 24));var hours = Math.floor((countdownDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes = Math.floor((countdownDate % (1000 * 60 * 60)) / (1000 * 60));var seconds = Math.floor((countdownDate % (1000 * 60)) / 1000);document.getElementById("countdown").textContent = days + "天 " + hours + "小时" + minutes + "分钟 " + seconds + "秒";// 获取当前时间now = new Date().getTime();countdownDate = new Date(examDate).getTime() - now;}setInterval(updateCountdown, 1000);</script><div class="bottomStyle">XXXXXXXXXXXXX</div></body>
</html>