Обратный отсчет загрузки при загрузке страницы

Question 1

Я использую сценарий обратного отсчета, который вычитает время окончания обратного отсчета из текущего времени с помощью 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

0

Tripp 29 Окт 2019 в 22:14

Answer

Причина, по которой требуется секунда, заключается в том, что 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

Jon Warren 29 Окт 2019 в 22:28

Question 2

Причина, по которой требуется секунда, заключается в том, что 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

Jon Warren 29 Окт 2019 в 22:28

Обратный отсчет загрузки при загрузке страницы

1 ответ

Похожие вопросы

Новые вопросы

javascript