html 从您第一次访问该网站倒计时

Posted 2021-05-11

<style>
#countdown-timer {
  background-color: white;
  min-width: 300px;
  height: 162px;
  position: relative;
  font-family: 'Lato', sans-serif;
  color: #2f2f2f;
}

#countdown-timer .time-block {
  width: 30%;
  float: left;
  text-align: center;
  padding-top: 20px;
}

#countdown-timer .divider-block {
  width: 5%;
  float: left;
  text-align: center;
  padding-top: 15px;
}

#hours,
#minutes,
#seconds,
.divider-block {
  font-size: 70px;
  font-weight: bold;
}

.timer-title {
  color: rgb(138, 138, 138);
  display: inline-block;
  margin-top: 10px;
  font-size: 20px;
}
</style>

<script>
jQuery(document).ready(function(){	
(function(){
  var h = document.getElementById('hours');
  var m = document.getElementById('minutes');
  var s = document.getElementById('seconds');
  
  var startTime = null;
  
  var intervalID = null;
  
  function getStartTime () {
    
    var storedStartTime = localStorage.getItem('startTime');
    
    //Check if we have something stored in localstorage
    if (storedStartTime === null) {
      //if not, set default
      startTime = Date.now();  
      localStorage.setItem('startTime', startTime);
    }
    else {
      startTime = storedStartTime;
    }
  }
  
  function tick() {
    displayDiff(Date.now() - startTime);
  }
  
  function displayDiff(diff) {
    
    if (diff < 86400000) {
      var allsecs = Math.round(diff / 1000);
      allsecs = 86400 - allsecs;
      
      var hs = Math.floor(allsecs / 3600);
      allsecs = allsecs - (hs * 3600);
      
      var ms = Math.floor(allsecs / 60);
      allsecs = allsecs - (ms * 60);
      
      //Format for sub 10 seconds having 0 in front of them
      if (hs < 10) {
        hs = "0"+hs;
      }
      if (ms < 10) {
        ms = "0"+ms;
      }
      if (allsecs < 10) {
        allsecs = "0"+allsecs;
      }
      
      //Set the DOM
      h.innerHTML = hs;
      m.innerHTML = ms;
      s.innerHTML = allsecs;
    }
    else {
      h.innerHTML = "--";
      m.innerHTML = "--";
      s.innerHTML = "--";
      
      clearInterval(intervalID);
    }
    
  }
  
  getStartTime();
  
  intervalID = setInterval(tick, 1000);
  
}());
});
</script>

<div id="countdown-timer">
  <div class="time-block">
    <span id="hours">--</span>
    <br />
    <span class="timer-title">HOURS</span>
  </div>
  <div class="divider-block">
    <span>:</span>
  </div>
  <div class="time-block">
    <span id="minutes">--</span>
    <br />
    <span class="timer-title">MINUTES</span>
  </div>
  <div class="divider-block">
    <span>:</span>
  </div>
  <div class="time-block">
    <span id="seconds">--</span>
    <br />
    <span class="timer-title">SECONDS</span>
  </div>
</div>