欢度新岁，共迎新年：JS代码打造新年倒计时

2023-04-20 01:10:36

使用 JavaScript 代码打造新年倒计时

新年伊始，与其枯燥地等待，不如使用 JavaScript 代码创建一个激动人心的新年倒计时，让节日的氛围更加浓烈。本教程将手把手地教你如何用 JavaScript 创建一个倒计时，让你以最有趣的方式迎接新的一年。

准备工作

选择一个代码编辑器：Visual Studio Code、Atom 或 Sublime Text 都是不错的选择。
创建一个新文件：创建一个名为 "new-year-countdown.js" 的新文件。
导入必要的库：使用 "moment.js" 库来处理日期和时间。

import moment from "moment";

定义倒计时日期

确定目标日期： 将你想要倒计时的日期（如 "2023 年 1 月 1 日 00:00:00"）存储在变量中。
计算剩余时间： 使用 "moment.js" 库计算目标日期和当前日期之间的剩余时间，以天、时、分和秒为单位。

const targetDate = moment("January 1, 2023 00:00:00");
const now = moment();
const msRemaining = targetDate.diff(now);
const daysRemaining = Math.floor(msRemaining / (1000 * 60 * 60 * 24));
const hoursRemaining = Math.floor((msRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutesRemaining = Math.floor((msRemaining % (1000 * 60 * 60)) / (1000 * 60));
const secondsRemaining = Math.floor((msRemaining % (1000 * 60)) / 1000);

创建倒计时元素

创建 HTML 元素： 在 HTML 文件中创建一个<div>元素来显示倒计时。
将元素添加到页面： 将<div>元素添加到要显示倒计时的页面中。

<div id="countdown"></div>

编写 JavaScript 代码

创建更新倒计时函数： 创建一个函数来每秒更新倒计时。
调用函数： 调用函数以启动倒计时。

function updateCountdown() {
  // 计算剩余时间
  const msRemaining = targetDate.diff(moment());
  const daysRemaining = Math.floor(msRemaining / (1000 * 60 * 60 * 24));
  const hoursRemaining = Math.floor((msRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutesRemaining = Math.floor((msRemaining % (1000 * 60 * 60)) / (1000 * 60));
  const secondsRemaining = Math.floor((msRemaining % (1000 * 60)) / 1000);

  // 更新倒计时元素
  document.getElementById("countdown").innerHTML = `
    <div class="days">${daysRemaining} Days</div>
    <div class="hours">${hoursRemaining} Hours</div>
    <div class="minutes">${minutesRemaining} Minutes</div>
    <div class="seconds">${secondsRemaining} Seconds</div>
  `;

  setTimeout(updateCountdown, 1000);
}

updateCountdown();

优化倒计时样式

添加 CSS 样式： 添加样式以美化倒计时。
预览倒计时： 在浏览器中预览 HTML 文件，查看新年倒计时。

#countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  background-color: #000000;
  padding: 20px;
  margin: 20px;
  border: 1px solid #ffffff;
  border-radius: 5px;
}

.days, .hours, .minutes, .seconds {
  margin-right: 20px;
}