js实现简单的倒计时

下面是关于“JS实现简单的倒计时”的详细攻略。

基本思路

倒计时的原理很简单，就是获取未来的某个时间点与当前时间点的差值，然后根据差值计算出剩余的时间，最后通过 DOM 操作将剩余的时间显示在网页上。

实现步骤

1. 获取未来时间点

倒计时的第一步就是要获取未来的某个时间点，可以在 HTML 中用一个 input 标签来输入一个日期时间字符串，然后使用 new Date() 方法将其转成 JavaScript 的 Date 对象，如下所示：

<input type="datetime-local" id="deadline" />

const deadlineInput = document.getElementById('deadline');
const deadline = new Date(deadlineInput.value);

另外，还可以使用 Date.parse() 方法将日期字符串转换为时间戳，不过需要注意的是，这种方法只能识别一些固定格式的日期字符串。

2. 获取当前时间点

倒计时的第二步就是要获取当前的时间点，同样可以使用 new Date() 方法来获取，如下所示：

const now = new Date();

3. 计算时间差值

倒计时的第三步就是要计算未来时间与当前时间的差值，最简单的做法就是用未来时间戳减去当前时间戳，可以使用 getTime() 方法获取时间戳，如下所示：

const diff = deadline.getTime() - now.getTime();

4. 转换时间格式

倒计时的第四步就是要将时间差值转换成具体的剩余时间，这里可以使用一些数学运算和字符串模板的方法来实现，如下所示：

// 计算剩余时间的小时、分钟和秒数
const hours = Math.floor(diff / (60 * 60 * 1000));
const minutes = Math.floor(diff / (60 * 1000) % 60);
const seconds = Math.floor(diff / 1000 % 60);

// 拼接剩余时间的字符串模板
const remainingTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

其中，Math.floor() 方法用于向下取整，toString() 方法用于将数字转成字符串，padStart() 方法用于将字符串的长度填充到指定的长度。

5. 显示剩余时间

倒计时的最后一步就是要将剩余时间显示在网页上，可以直接通过 DOM 操作将剩余时间的字符串模板赋值给某个元素的 textContent 属性，如下所示：

const remainingTimeElem = document.getElementById('remaining-time');
remainingTimeElem.textContent = remainingTime;

示例说明

下面给出两个示例，分别演示了如何使用 HTML、CSS 和 JavaScript 实现一个基本的倒计时效果。

示例一：基本倒计时

HTML 代码：

<div class="counter">
  <span id="remaining-time">00:00:00</span>
</div>
<form id="deadline-form">
  <label for="deadline">截止时间：</label>
  <input type="datetime-local" id="deadline" />
  <button type="submit">开始倒计时</button>
</form>

CSS 代码：

.counter {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-top: 2rem;
}

JavaScript 代码：

const deadlineForm = document.getElementById('deadline-form');
const remainingTimeElem = document.getElementById('remaining-time');

deadlineForm.addEventListener('submit', function (event) {
  event.preventDefault();

  const deadlineInput = document.getElementById('deadline');
  const deadline = new Date(deadlineInput.value);
  const now = new Date();
  const diff = deadline.getTime() - now.getTime();

  setInterval(function () {
    const hours = Math.floor(diff / (60 * 60 * 1000));
    const minutes = Math.floor(diff / (60 * 1000) % 60);
    const seconds = Math.floor(diff / 1000 % 60);
    const remainingTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

    remainingTimeElem.textContent = remainingTime;

    if (--diff <= 0) {
      clearInterval(this);
      alert('时间到！');
    }
  }, 1000);
});

该示例展示了一个简单的倒计时效果，可以在表单中输入一个日期时间，然后按下“开始倒计时”按钮，程序就会开始倒计时，最后当剩余时间为 0 时会弹出一个提示框来提醒用户。

示例二：钟表倒计时

HTML 代码：

<div class="clock">
  <div class="clock-hand clock-hour"></div>
  <div class="clock-hand clock-minute"></div>
  <div class="clock-hand clock-second"></div>
</div>
<form id="deadline-form">
  <label for="deadline">截止时间：</label>
  <input type="datetime-local" id="deadline" />
  <button type="submit">开始计时</button>
</form>

CSS 代码：

.clock {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 2rem auto;
  border-radius: 50%;
  border: 2px solid #333;
}

.clock-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50%;
  transform-origin: bottom center;
  background-color: #333;
  transition: transform 0.5s ease-in-out;
}

.clock-hour {
  height: 40%;
}

.clock-minute {
  height: 60%;
}

.clock-second {
  height: 80%;
}

JavaScript 代码：

const deadlineForm = document.getElementById('deadline-form');
const clockHour = document.querySelector('.clock-hour');
const clockMinute = document.querySelector('.clock-minute');
const clockSecond = document.querySelector('.clock-second');

deadlineForm.addEventListener('submit', function (event) {
  event.preventDefault();

  const deadlineInput = document.getElementById('deadline');
  const deadline = new Date(deadlineInput.value);
  const diff = deadline.getTime() - new Date().getTime();

  setInterval(function () {
    const totalSeconds = Math.floor(diff / 1000);
    const remainingSeconds = totalSeconds % 60;
    const remainingMinutes = Math.floor(totalSeconds / 60) % 60;
    const remainingHours = Math.floor(totalSeconds / 3600) % 12;
    const hourAngle = remainingHours * 30 + remainingMinutes * 0.5;
    const minuteAngle = remainingMinutes * 6;
    const secondAngle = remainingSeconds * 6;

    clockHour.style.transform = `rotate(${hourAngle}deg)`;
    clockMinute.style.transform = `rotate(${minuteAngle}deg)`;
    clockSecond.style.transform = `rotate(${secondAngle}deg)`;
  }, 1000);
});

该示例展示了一个基于时钟的倒计时效果，可以在表单中输入一个日期时间，然后按下“开始计时”按钮，程序就会开始进行倒计时，最后通过 CSS 的动画来展示剩余时间。