Question

瑞典晚上好！我的倒计时代码需要帮助。

在代码的最后一部分中，我添加了一个部分，该部分将在最后一个数字之前添加一个0（如果它在0到9之间）以始终保持六位数长，为什么它不起作用？

希望很快能收到你们的来信，因为这必须在一天结束之前完成

    <!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face {
    font-family: Khula;
    src: url('Khula-ExtraBold.ttf');
}

p {
    text-align: center;
    font-size: 60px;
    margin-top: 0px;
    font-family: Khula;
}
#text {
    text align: center;
    font-size:9px;
}
</style>
</head>
<body>

<p id="date"></p>
<script>
// Countdown to
var countDownDate = new Date("Dec 20, 2018 08:53:25").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 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="date"
    document.getElementById("date").innerHTML = days + " " + hours + " "
    + minutes;

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

    // If the number of minutes left is between 0 and 9 add a 0 before it
    if (minutes < 10 && minutes < 0) {
    document.getElementById("date").innerHTML = days + " " + hours + " 0"
    + minutes;
    }
        }
}, 1000);
</script>

</body>
</html>

Answer 1

为避免进行多次DOM操作和不必要的计算，请首先检查计时器是否已过期。只有这样，如果需要，构造计时器字符串。

var countDownDate = new Date("Dec 20, 2018 08:53:25").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 and the count down date
  var distance = countDownDate - now;

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("date").innerHTML = "EXPIRED";
  } else {
    // 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);

    // If the number left is between 0 and 9 add a 0 before it
    var daysStr = days < 10 ? "0" + days : days;
    var hoursStr = hours < 10 ? "0" + hours : hours;
    var minutesStr = minutes < 10 ? "0" + minutes : minutes;
    var secondsStr = seconds < 10 ? "0" + seconds : seconds;
    // Output the result in an element with id="date"
    document.getElementById("date").innerHTML = daysStr + " " + hoursStr + " " + minutesStr + " " + secondsStr;
  }

}, 1000);

@import url('https://fonts.googleapis.com/css?family=Oswald');
@font-face {
  font-family: Khula;
  src: url('Khula-ExtraBold.ttf');
}

p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
  font-family: Khula;
}

#text {
  text-align: center;
  font-size: 9px;
}

<p id="date"></p>

Answer 2

如果您不熟悉ternary operator，则我只是一行if语句。

var countDownDate = new Date("Dec 20, 2018 08:53:25").getTime();

var x = setInterval(function() {
    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);

    // after the calculation we reassigning to the variables 
    // hours < 10 ? : means if hours is less than 10
    // if so assing "0" + hours to variable hours
    // : is basically the else and then we just keep as it is
    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;


    document.getElementById("date").innerHTML = days + ":" + hours + ":" +
      minutes + ":" + seconds;


    if (distance < 0) {
      clearInterval(x);
      document.getElementById("date").innerHTML = "EXPIRED";
    }
  },
  1000);

#date {
  font-size: 4em;
}

<p id="date"></p>

Answer 3

“在带有ID日期的元素注释中输出结果”部分下方存在一些格式问题。以下内容将为您提供期望的结果。

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

// If the number of days left is between 0 and 9 add a 0 before it
if (days < 10 && days >= 0) {
document.getElementById("date").innerHTML = "0" + days + " " + hours + " "
+ minutes;
    // If the number of hours left is between 0 and 9 add a 0 before it
    if (hours < 10 && hours >= 0) {
    document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " "
    + minutes;
        // If the number of minutes left is between 0 and 9 add a 0 before it
        if (minutes < 10 && minutes >= 0) {
        document.getElementById("date").innerHTML = "0" + days + " 0" + hours + " 0"
        + minutes;
        }            
    }        
}

在JavaScript中加数字的错误

3 个答案: