纯js实现倒计时功能

最新推荐文章于 2025-03-28 14:19:43 发布

小奋斗♛

最新推荐文章于 2025-03-28 14:19:43 发布

阅读量306

点赞数 2

文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/m0_72684019/article/details/143885998

版权

效果：

html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>纯js倒计时</title>
    <style>
        .countdown_box{
            display: flex;
            justify-content: center;
        }
        .countdown_box_item{
            min-width: 60px;
            margin: 5px;
            padding: 2px;
            text-align: center;
            border: 1px solid #000;
        }
    </style>
  </head>
  <body>
    <div id="countdown" class="countdown_box">
        <div class="countdown_box_item"><div id="days"></div>
        days</div>
        <div class="countdown_box_item"><div id="hours"></div>
        hours</div>
        <div class="countdown_box_item"><div id="minutes"></div>
        minutes</div>
        <div class="countdown_box_item"><div id="seconds"></div>
        seconds</div>            
    </div>

    <script src="./demo.js"></script>
  </body>
</html>

js代码：

// 使用格式：'YYYY-MM-DDTHH:MM:SSZ'

// 定义倒计时器的开始和结束时间
const startTime = new Date('2024-11-15T01:00+0800').getTime(); // 开始时间
const endTime = new Date('2024-11-19T18:30+0800').getTime(); // 结束时间

// 更新倒计时器的函数
function updateCountdown() {
  // 获取当前时间
  const now = new Date().getTime();

  // 计算时间差
  let distance;
  if (now < startTime) {
    // 当前时间早于开始时间
    distance = startTime - now;
  } else if (now >= startTime && now < endTime) {
    // 当前时间在开始时间和结束时间之间
    distance = endTime - now;
  } else {
    // 当前时间晚于结束时间
    distance = 0;
    clearInterval(interval); // 清除定时器
  }

  // 时间转换
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // 将结果格式化为两位数字
  const formattedDays = String(days).padStart(2, '0');
  const formattedHours = String(hours).padStart(2, '0');
  const formattedMinutes = String(minutes).padStart(2, '0');
  const formattedSeconds = String(seconds).padStart(2, '0');

  // 更新HTML元素的内容
  document.getElementById('days').textContent = formattedDays;
  document.getElementById('hours').textContent = formattedHours;
  document.getElementById('minutes').textContent = formattedMinutes;
  document.getElementById('seconds').textContent = formattedSeconds;
}

// 使用setInterval每秒更新倒计时
let interval = setInterval(updateCountdown, 1000);