如何用JavaScript在指定时间自动加载倒计时Div？无需页面刷新

嘿，我明白你的困扰了——现在的代码只在页面加载的时候做一次时间判断，如果打开页面时还没到倒计时的开始时间，就不会自动触发计时器显示，对吧？别担心，我们只需要添加一个定时检查的逻辑，就能实现不用刷新页面，到点自动显示计时器。

问题根源 #

你当前的代码只在页面初始化时执行了一次时间判断：

if (endMs > currentMs && currentMs >= startMs ){
  initializeClock('event', endDate);
}else{
  document.getElementById("event").style.display = "none";
}

这就导致如果打开页面时还没到startDate，后续时间推移到开始时间时，没有代码去重新检查这个条件，所以计时器不会自动出现。

解决方案 #

我们可以把时间判断的逻辑封装成一个函数，然后设置一个定时检查器，每隔一段时间（比如1秒）就检查一次当前时间是否到达了开始时间。一旦到达，就初始化计时器，同时停止这个定时检查；如果已经过了结束时间，就隐藏容器并停止检查。

修改后的完整代码 #

JavaScript 部分

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  return {
    'total': t,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  // 显示倒计时容器
  document.getElementById("event").style.display = 'block';
  var cHours = document.getElementById(id).querySelector('.hours');
  var cMinutes = document.getElementById(id).querySelector('.minutes');
  var cSeconds = document.getElementById(id).querySelector('.seconds');

  function updateClock() {
    var tr = getTimeRemaining(endtime);
    // 补零处理
    cHours.innerHTML = ('0' + tr.hours).slice(-2);
    cMinutes.innerHTML = ('0' + tr.minutes).slice(-2);
    cSeconds.innerHTML = ('0' + tr.seconds).slice(-2);

    if (tr.total <= 0) {
      clearInterval(timeinterval);
      document.getElementById(id).style.display = "none";
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

// 设置开始和结束时间
var deadline = ['May 18 2018 13:01:00 GMT-5','May 18 2018 22:29:00 GMT-5'];
var startDate = deadline[0];
var endDate = deadline[1];
var startMs = Date.parse(startDate);
var endMs = Date.parse(endDate);

// 定义定时检查的定时器变量
var checkTimer;

function checkAndInitializeClock() {
  var currentMs = Date.parse(new Date());
  
  // 当前时间在开始和结束之间：初始化计时器，停止检查
  if (endMs > currentMs && currentMs >= startMs ){
    initializeClock('event', endDate);
    clearInterval(checkTimer);
  } 
  // 当前时间已经过了结束时间：隐藏容器，停止检查
  else if (currentMs >= endMs) {
    document.getElementById("event").style.display = "none";
    clearInterval(checkTimer);
  }
  // 还没到开始时间：什么都不做，继续定时检查
}

// 页面加载时先检查一次，然后每隔1秒检查一次
checkAndInitializeClock();
checkTimer = setInterval(checkAndInitializeClock, 1000);

HTML 部分（无需修改）

<div id="event">
  <div id="countdownHolder">
    <div>
      <h3><strong><span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span></strong><br> Save up to 25% before time runs out.</h3>
    </div>
  </div>
  <div id="test">
    <h1>Hide the entire event section at 00:00:00</h1>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
  </div>
</div>

关键说明 #

• 我们新增了checkAndInitializeClock函数，专门负责时间判断逻辑
• 用setInterval创建了一个每秒执行一次的检查器，直到满足初始化条件或者超过结束时间
• 一旦初始化计时器或者确认已经过了结束时间，就用clearInterval停止检查，避免不必要的性能消耗

这样不管你什么时候打开页面，只要在开始时间之前，页面都会自动每秒检查时间，到点就自动显示倒计时啦！

内容的提问来源于stack exchange，提问作者royald