Question

我正在使用一个倒计时脚本，该脚本使用新的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>

Answer 1

之所以需要一秒钟，是因为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);

网页载入中的载入倒数

1 个答案: