使用javascript在特定时间自动加载div

Question

我正在构建倒数计时器，该计时器显示在开始日期/时间并在结束日期/时间折叠div。我的问题是如果我在倒计时开始之前已经在页面上直到刷新页面，倒数计时器就不会显示。如果我在开始时间之前已经在页面上，如何自动显示计数器。在此先感谢您的帮助。

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) {
    //display countdown
    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);

    //add Zero to values
    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);
}


//set start and end date
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];

  // put dates in milliseconds for easy comparisons
  var startMs = Date.parse(startDate);
  var endMs = Date.parse(endDate);
  var currentMs = Date.parse(new Date());

  // if current date is between start and end dates, display clock
  if (endMs > currentMs && currentMs >= startMs ){                  
      initializeClock('event', endDate);                   
  }else{
    document.getElementById("event").style.display = "none";
}         

<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>

Answer 1

在这种情况下你需要做的就是启动另一个间隔，检查它是否有时间初始化你的时钟。我将你的代码包装在另一个函数中，每隔3秒调用一次，检查是否有时间初始化你的时钟。

页面上已有的用户将在其生效后的x秒内获得此更新。

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) {
  //display countdown
  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);

    //add Zero to values
    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 checkStartInterval = setInterval(checkIfStartTime, 3000);

function checkIfStartTime() {
  //set start and end date
  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];

  // put dates in milliseconds for easy comparisons
  var startMs = Date.parse(startDate);
  var endMs = Date.parse(endDate);
  var currentMs = Date.parse(new Date());

  // if current date is between start and end dates, display clock
  if (endMs > currentMs && currentMs >= startMs) {
    initializeClock('event', endDate);
    clearInterval(checkStartInterval);
  } else {
    document.getElementById("event").style.display = "none";
  }
}

<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>