倒數計時器-變數過期時隱藏

尋求倒數計時器的幫助我必須在特定時間顯示頁面的容器。我希望“天”“小時”“分鐘”在它們達到零時消失。

任何人都可以幫忙嗎？

<h3 id="demo"></h3>

<script>
// Set the date we're counting down to
var countDownDate = new Date("1/21/2022 11:00:00").getTime();

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

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and 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);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days   " day "   hours   " hours "    minutes   " min "   seconds   " sec ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Reserve Tickets";
  }
}, 1000);
</script> 

uj5u.com熱心網友回復：

僅在距離 > 0 時更新變數

<h3 id="demo"></h3>

<script>
// Set the date we're counting down to
var countDownDate = new Date("1/21/2022 11:00:00").getTime();

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

  // Get today's date and time
  let now = new Date().getTime();
    
  // Find the distance between now and the count down date
  let distance = countDownDate - now;
    
  // If the count down is over, write some text 
  if (distance >= 0) {
    // Time calculations for days, hours, minutes and seconds
    let days = Math.floor(distance / (1000 * 60 * 60 * 24)); 
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days   " day "   hours   " hours "    minutes   " min "   seconds   " sec ";

  } else {

    clearInterval(x);
    document.getElementById("demo").innerHTML = "Reserve Tickets";
  }
}, 1000);
</script> 

uj5u.com熱心網友回復：

只需在更新 DOM 時處理它

// Set the date we're counting down to
var countDownDate = new Date("1/21/2022 11:00:00").getTime();

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

    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and 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);

    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML =
        (days === 0 ? '' : days   " day ")  
        ((days === 0 && hours === 0) ? '' : hours   " hours ")  
        ((days === 0 && hours === 0 && minutes === 0) ? '' : minutes   " min ")  
        ((days === 0 && hours === 0 && minutes === 0 && seconds === 0) ? '' : seconds   " sec ");

    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "Reserve Tickets";
    }
}, 1000);

<h3 id="demo"></h3>

標籤：

上一篇：SyntaxError：嘗試創建不和諧機器人時已宣告識別符號“客戶端”

下一篇：使用GnuTLS構建時libcurl執行緒是否安全