跨年倒计时之烟花盛开

2023-10-06 01:32:44

用HTML倒计时迎接新年：绚烂烟花拉开新年序幕

迎接新年的时刻即将到来！ 随着 2023 年的临近，人们迫不及待地想要辞旧迎新。而什么能比一场精彩的 HTML 倒计时和绚烂的烟花盛宴更能点亮跨年之夜？在这个指南中，我们将逐步向您展示如何创建自己的跨年倒计时 HTML，并在新年钟声敲响时用烟花照亮夜空。

1. HTML 倒计时编码

首先，创建一个 HTML 文件并添加以下代码：

<!Doctype html>
<html>
<head>

<style>
body {
  background-color: #000;
  color: #FFF;
  text-align: center;
}

#clock {
  font-size: 50px;
  font-family: sans-serif;
}

</style>
</head>
<body>
<div id="clock"></div>
<script>
//获取截止时间
var endTime = new Date("2023-01-01 00:00:00").getTime();

//获取距离截止时间的毫秒数
var timeDifference = endTime - new Date().getTime();

//获取天、时、分、秒
var days = Math.abs(Math.trunc(timeDifference / (1000 * 60 * 60 * 24))),
    hours = Math.trunc((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
    minutes = Math.trunc((timeDifference % (1000 * 60 * 60)) / (1000 * 60)),
    seconds = Math.trunc((timeDifference % (1000 * 60)) / 1000);

//渲染倒计时
setInterval(function() {
  days = Math.trunc(timeDifference / (1000 * 60 * 60 * 24));
  hours = Math.trunc((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  minutes = Math.trunc((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
  seconds = Math.trunc((timeDifference % (1000 * 60)) / 1000);
  document.getElementById("clock").innerText = days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒";

  //当倒计时结束时，播放烟花动画
  if (timeDifference < 0) {
    document.getElementById("clock").innerText = "新年快乐!";
    //播放烟花动画
  }

  //递减时间
  timeDifference -= 1000;
}, 1000);
</script>
</body>
</html>