Saya menggunakan skrip hitung mundur yang mengurangi waktu hitung mundur berakhir dari waktu saat ini menggunakan Date.getTime() baru. Masalah yang saya coba pecahkan adalah bahwa ketika halaman dimuat, hitungan mundur perlu satu detik untuk ditampilkan karena browser mendapatkan waktu saat ini yang saya yakini. Apakah ada cara agar waktu hitung mundur ditampilkan lebih cepat saat memuat ulang halaman?

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>
0
Tripp 29 Oktober 2019, 22:14

1 menjawab

Jawaban Terbaik

Alasan dibutuhkan satu detik adalah karena setInterval mengeksekusi setiap detik (seperti yang diinginkan), tetapi tidak mengeksekusi pada awalnya sampai setelah detik pertama berlalu.

Pertimbangkan untuk memindahkan logika Anda ke suatu fungsi dan melakukan sesuatu seperti ini:

//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 Oktober 2019, 19:28