春节倒计时-站长杂谈-DZ插件网

春节倒计时

左右不逢缘

2023/12/26 10:19:01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <title>春节倒计时</title>
  <style>
body {
   font-family: Arial, sans-serif;
   text-align: center;
}

h1 {
   color: #FF0000;
}

#countdown {
   font-size: 48px;
   margin-top: 20px;
}
  </style>
</head>
<body>
  <h1>春节倒计时</h1>
  <div id="countdown"></div>

  <script>
// 设置目标日期为2024年2月10日
var targetDate = new Date("2024-02-10T00:00:00Z").getTime();

// 更新倒计时
function updateCountdown() {
   var now = new Date().getTime();
   var distance = targetDate - 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("countdown").innerHTML = days + "天 " + hours + "小时 "
      + minutes + "分钟 " + seconds + "秒";

   // 如果倒计时结束，显示提示信息
   if (distance < 0) {
      document.getElementById("countdown").innerHTML = "春节已经到了！";
   }
}

// 每秒更新倒计时
setInterval(updateCountdown, 1000);
  </script>
</body>
</html>

进入原文参与互动