时间戳

首页 > 解决方案 > 页面加载倒计时

javascript - 页面加载倒计时

问题描述

我正在使用倒计时脚本，该脚本使用 new Date.getTime() 从当前时间中减去倒计时结束的时间。我要解决的问题是，当页面加载时，由于浏览器获得了我认为的当前时间，倒计时需要一秒钟才能显示。有什么方法可以让倒计时时间在页面重新加载时显示得更快？

JS

var countdownText = document.querySelector("#countdown-text");

// Set the date we're counting down to
var countDownDate = new Date("March 31, 2020 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

// Get todays date and time
var now = new Date().getTime();

// Find the distance between now an the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

//Zeros
var days = (days.toLocaleString(undefined,{minimumIntegerDigits: 2}));
var hours = (hours.toLocaleString(undefined,{minimumIntegerDigits: 2}));
var minutes = (minutes.toLocaleString(undefined,{minimumIntegerDigits: 2}));
var seconds = (seconds.toLocaleString(undefined,{minimumIntegerDigits: 2}));

// Display the result in the element with id="demo"
document.getElementById("daysTicker").innerHTML = days;
document.getElementById("hoursTicker").innerHTML = hours;
document.getElementById("minsTicker").innerHTML = minutes;
document.getElementById("secsTicker").innerHTML = seconds;

// If the count down is finished, write some text
if (seconds < 0) {
    clearInterval(x);
    countdownText.innerHTML = "00:00:00:00";
  }
}, 1000);

HTML

<div id="countdown-text">
 <div class="timer">
  <div id="daysTicker" class="countdown"></div>
  </div><span>:</span>
  <div class="timer">
  <div id="hoursTicker" class="countdown"></div>
  </div><span>:</span>
  <div class="timer">
  <div id="minsTicker" class="countdown"></div>
  </div><span>:</span>
  <div class="timer">
  <div id="secsTicker" class="countdown"></div>
 </div>
</div>

标签： javascript

解决方案

它需要一秒钟的原因是因为 setInterval 每秒执行一次（根据需要），但直到第一秒过去后才开始执行。

考虑将您的逻辑移动到一个函数并执行以下操作：

//Initializations
var countdownText = document.querySelector("#countdown-text");
var countDownDate = new Date("March 31, 2020 00:00:00").getTime();

//Create a new function for decrementing the timer
function decrementTime() {

    var now = new Date().getTime();
    var distance = countDownDate - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    var days = (days.toLocaleString(undefined,{minimumIntegerDigits: 2}));
    var hours = (hours.toLocaleString(undefined,{minimumIntegerDigits: 2}));
    var minutes = (minutes.toLocaleString(undefined,{minimumIntegerDigits: 2}));
    var seconds = (seconds.toLocaleString(undefined,{minimumIntegerDigits: 2}));

    document.getElementById("daysTicker").innerHTML = days;
    document.getElementById("hoursTicker").innerHTML = hours;
    document.getElementById("minsTicker").innerHTML = minutes;
    document.getElementById("secsTicker").innerHTML = seconds;

    if (seconds < 0) {
        clearInterval(x);
        countdownText.innerHTML = "00:00:00:00";
    }
}

//Update the timer once immediately, and begin the timer a second later
decrementTime();
var x = setInterval(decrementTime, 1000);

推荐阅读