帮我写一个时间为2023年6月1日的倒计时酷炫html代码
时间: 2023-12-06 10:05:06 浏览: 93
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
body {
background-color: #333;
color: #fff;
text-align: center;
font-size: 3em;
font-family: Arial, sans-serif;
}
#countdown {
margin: 50px auto;
width: 300px;
height: 150px;
border-radius: 10px;
background-color: #444;
display: flex;
justify-content: center;
align-items: center;
}
#countdown span {
margin: 0 20px;
background-color: #222;
padding: 10px 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>倒计时</h1>
<div id="countdown">
<span id="days">0</span>
<span id="hours">0</span>
<span id="minutes">0</span>
<span id="seconds">0</span>
</div>
<script>
// 2023年6月1日 00:00:00 的时间戳
var countDownDate = new Date("June 1, 2023 00:00:00").getTime();
// 每一秒更新倒计时
var x = setInterval(function() {
// 当前时间的时间戳
var now = new Date().getTime();
// 相差的时间
var distance = countDownDate - now;
// 计算剩余时间
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var 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 + " 秒";
// 如果倒计时结束,显示倒计时已结束
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "倒计时已结束";
}
}, 1000);
</script>
</body>
</html>
阅读全文