Question

我们有这个圣诞节倒计时，但现在它显示已过期，而不是重置为明年

// Set the date we're counting down to
var year = new Date().getFullYear();
var countDownDate = new Date("Dec 24, " + year + " 23: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);

  // Display the result in the element with id="clock"
  document.getElementById("clock").innerHTML = days + " days " + hours + "hrs. " + minutes + "mins. " + seconds + "secs. ";

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

“已过期”消息应该在12月25日至26日显示，然后重新设置为从明年27日算起？

Answer 1

我看不到您在哪里检查日期是否晚于12月26日，这里应该是这样的代码

if (days < -2) {
  countDownDate = new Date("Dec 24, " + (year + 1) + " 23:00:00").getTime();
} else if (distance < 0) {
  clearInterval(x);
  document.getElementById("clock").innerHTML = "EXPIRED";
}

或者在刚开始写就更好

var now = new Date()
var year = now.getFullYear() + (now.getMonth() == 11 && now.getDate() > 26)

Answer 2

以下是对代码的建议编辑。在顶部附近，我们决定要倒数的圣诞节。

如果查看代码和注释，则可以了解有关如何在JavaScript中使用日期信息的更多信息。

如果您想了解更多信息，请访问MDN's Date Object page。

// Get a Date object for the current time before starting the countdown
let startTime = new Date()

// Get the year, month and day from the date object
let year = startTime.getFullYear();
let monthIndex = startTime.getMonth();
let dayOfMonth = startTime.getDate();
//console.log (`${year} ${monthIndex} ${dayOfMonth}`);
if (monthIndex === 11 && dayOfMonth > 27){ // Jan has monthIndex == 0
  year = year + 1; // Use next year
}

// Set the date we're counting down to
let countDownDate = new Date("Dec 24, " + year + " 23:00:00").getTime();

// Start the countdown, updating the display every 1 second
var x = setInterval(function() {

  // Get a Date object for the current second of the countdown
  var date = new Date()

  // Get the timestamp from the Date object
  var now = 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);

  // Function to show "day" if 1 day, "days" if 2 or more days, etc.
  function pluralIfAppropriate(value, singularLabel, pluralLabel){
    if(value == 1){
      return singularLabel;
    }
    else{
      if(pluralLabel == undefined){
        pluralLabel = singularLabel + "s";
      }
      return pluralLabel;
    }
  }
  
  // Builds the display text
  let displayText = `${days} ${pluralIfAppropriate(days, "day")} ${hours}${pluralIfAppropriate(hours, "hr")} ${minutes}${pluralIfAppropriate(minutes, "min")} ${seconds}${pluralIfAppropriate(seconds, "sec")}`;
  
  // Displays the displayText in the element with id="clock"
  document.getElementById("clock").innerHTML = displayText;
 
  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("clock").innerHTML = "EXPIRED";
  }
}, 1000);

<p id="clock"></p>

明年不重置倒计时

2 个答案: