JavaScript实现前端倒计时效果

2023年6月11日下午12:21 • JavaScript

JavaScript实现前端倒计时效果是一种常见的网页交互形式，通常用于倒计时活动、秒杀活动等。

实现思路

获取当前时间和目标时间
计算剩余时间，并转换成时、分、秒
动态更新页面显示剩余时间

具体实现

获取当前时间和目标时间

// 获取当前时间和目标时间
const now = new Date();
const target = new Date('2022-01-01 00:00:00');

计算剩余时间并转换

// 计算剩余时间并转换成时、分、秒
const diff = target.getTime() - now.getTime();
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);

动态更新页面

// 动态更新页面
const hourElement = document.querySelector('#hour');
const minuteElement = document.querySelector('#minute');
const secondElement = document.querySelector('#second');

hourElement.innerHTML = hours;
minuteElement.innerHTML = minutes;
secondElement.innerHTML = seconds;

setInterval(() => {
  const now = new Date();
  const diff = target.getTime() - now.getTime();
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  hourElement.innerHTML = hours;
  minuteElement.innerHTML = minutes;
  secondElement.innerHTML = seconds;
}, 1000);

示例1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时示例1</title>
  <style>
    span {
      padding: 5px;
      margin-right: 5px;
      background-color: #333;
      color: #fff;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div>距离2022年元旦还有</div>
  <div>
    <span id="hour"></span>时
    <span id="minute"></span>分
    <span id="second"></span>秒
  </div>

  <script>
    const now = new Date();
    const target = new Date('2022-01-01 00:00:00');

    const diff = target.getTime() - now.getTime();
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    const hourElement = document.querySelector('#hour');
    const minuteElement = document.querySelector('#minute');
    const secondElement = document.querySelector('#second');

    hourElement.innerHTML = hours;
    minuteElement.innerHTML = minutes;
    secondElement.innerHTML = seconds;

    setInterval(() => {
      const now = new Date();
      const diff = target.getTime() - now.getTime();
      const hours = Math.floor(diff / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      hourElement.innerHTML = hours;
      minuteElement.innerHTML = minutes;
      secondElement.innerHTML = seconds;
    }, 1000);
  </script>
</body>
</html>

示例2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时示例2</title>
  <style>
    span {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: #ccc;
      font-size: 36px;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div>
    <span id="hour"></span>
    <span id="minute"></span>
    <span id="second"></span>
  </div>

  <script>
    const now = new Date();
    const target = new Date('2022-01-01 00:00:00');

    const diff = target.getTime() - now.getTime();
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    const hourElement = document.querySelector('#hour');
    const minuteElement = document.querySelector('#minute');
    const secondElement = document.querySelector('#second');

    hourElement.innerHTML = ('0' + hours).slice(-2) + ':';
    minuteElement.innerHTML = ('0' + minutes).slice(-2) + ':';
    secondElement.innerHTML = ('0' + seconds).slice(-2);

    setInterval(() => {
      const now = new Date();
      const diff = target.getTime() - now.getTime();
      const hours = Math.floor(diff / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      hourElement.innerHTML = ('0' + hours).slice(-2) + ':';
      minuteElement.innerHTML = ('0' + minutes).slice(-2) + ':';
      secondElement.innerHTML = ('0' + seconds).slice(-2);
    }, 1000);
  </script>
</body>
</html>

以上就是“JavaScript实现前端倒计时效果”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现前端倒计时效果 - Python技术站