返回

HTML中计时器的使用

闲谈

// HTML 版本的倒计时展示

HTML 代码

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>倒计时</h1>
  <div id="countdown"></div>
  <script>
    // 设置倒计时的目标日期
    let target_date = new Date('2023/12/31 23:59:59');

    // 获取当前日期和时间
    let current_date = new Date();

    // 计算剩余时间
    let remaining_time = target_date - current_date;

    // 将剩余时间转换为天、小时、分钟和秒
    let days = Math.floor(remaining_time / (1000 * 60 * 60 * 24));
    let hours = Math.floor((remaining_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((remaining_time % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((remaining_time % (1000 * 60)) / 1000);

    // 将剩余时间显示在页面上
    document.getElementById('countdown').innerHTML = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒';

    // 每秒更新倒计时
    setInterval(function() {
      // 获取当前日期和时间
      current_date = new Date();

      // 计算剩余时间
      remaining_time = target_date - current_date;

      // 将剩余时间转换为天、小时、分钟和秒
      days = Math.floor(remaining_time / (1000 * 60 * 60 * 24));
      hours = Math.floor((remaining_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      minutes = Math.floor((remaining_time % (1000 * 60 * 60)) / (1000 * 60));
      seconds = Math.floor((remaining_time % (1000 * 60)) / 1000);

      // 将剩余时间显示在页面上
      document.getElementById('countdown').innerHTML = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒';
    }, 1000);
  </script>
</body>
</html>

JavaScript 代码

// 设置倒计时的目标日期
let target_date = new Date('2023/12/31 23:59:59');

// 获取当前日期和时间
let current_date = new Date();

// 计算剩余时间
let remaining_time = target_date - current_date;

// 将剩余时间转换为天、小时、分钟和秒
let days = Math.floor(remaining_time / (1000 * 60 * 60 * 24));
let hours = Math.floor((remaining_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((remaining_time % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((remaining_time % (1000 * 60)) / 1000);

// 将剩余时间显示在页面上
document.getElementById('countdown').innerHTML = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒';

// 每秒更新倒计时
setInterval(function() {
  // 获取当前日期和时间
  current_date = new Date();

  // 计算剩余时间
  remaining_time = target_date - current_date;

  // 将剩余时间转换为天、小时、分钟和秒
  days = Math.floor(remaining_time / (1000 * 60 * 60 * 24));
  hours = Math.floor((remaining_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  minutes = Math.floor((remaining_time % (1000 * 60 * 60)) / (1000 * 60));
  seconds = Math.floor((remaining_time % (1000 * 60)) / 1000);

  // 将剩余时间显示在页面上
  document.getElementById('countdown').innerHTML = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒';
}, 1000);

运行效果

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>倒计时</h1>
  <div id="countdown"></div>
  <script>
    // 设置倒计时的目标日期
    let target_date = new Date('2023/12/31 23:59:59');

    // 获取当前日期和时间
    let current_date = new Date();

    // 计算剩余时间
    let remaining_time = target_date - current_date;

    // 将剩余时间转换为天、小时、分钟和秒
    let days = Math.floor(remaining_time / (1000 * 60 * 60 * 24));
    let hours = Math.floor((remaining_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((remaining_time % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((remaining_time % (1000 * 60)) / 1000);

    // 将剩余时间显示在页面上
    document.getElementById('countdown').innerHTML = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒';

    // 每秒更新倒计时
    setInterval(function() {
      // 获取当前日期和时间
      current_date = new Date();

      // 计算剩余时间
      remaining_time = target_date - current_date;

      // 将剩余时间转换为天、小时、分钟和秒
      days = Math.floor(remaining_time / (1000 * 60 * 60 * 24));
      hours = Math.floor((remaining_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      minutes = Math.floor((remaining_time % (1000 * 60 * 60)) / (1000 * 60));
      seconds = Math.floor((remaining_time % (1000 * 60)) / 1000);

      // 将剩余时间显示在页面上
      document.getElementById('countdown').innerHTML = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒';
    }, 1000);
  </script>
</body>
</html>