首页写出完整html、css和javascript代码，创建一个倒计时页面利用倒计时,每100毫秒变化一次倒计时

写出完整html、css和javascript代码，创建一个倒计时页面利用倒计时,每100毫秒变化一次倒计时

时间: 2024-03-25 12:37:28 浏览: 107

以下是一个简单的html、css和javascript代码，用于创建一个倒计时页面，每100毫秒变化一次倒计时： HTML代码： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="countdown"> <div class="time" id="days"></div> <div class="time" id="hours"></div> <div class="time" id="minutes"></div> <div class="time" id="seconds"></div> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ``` #countdown { display: flex; justify-content: center; align-items: center; height: 100vh; } .time { font-size: 5rem; margin: 0 1rem; } ``` JavaScript代码： ``` const countdown = () => { const targetDate = new Date("2022-01-01T00:00:00Z").getTime(); const now = new Date().getTime(); const distance = targetDate - now; const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById("days").innerHTML = days + "天"; document.getElementById("hours").innerHTML = hours + "小时"; document.getElementById("minutes").innerHTML = minutes + "分钟"; document.getElementById("seconds").innerHTML = seconds + "秒"; }; setInterval(countdown, 100); ``` 这段代码将会创建一个倒计时页面，显示距离2022年1月1日的时间，每100毫秒更新一次。你可以根据自己的需求修改目标日期和样式。

阅读全文