Question

如果数字仅下降到一位数，我需要创建一个javascript以使倒数计时器始终为两位数。如果秒数为6，我希望它说06，如果2时的小时要它说02等等。

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">

<body>
  <div class="countdown-wrapper">
    <div id="countdown-text">
      <div class="timer">
        <div id="daysTicker" class="countdown"></div>
        <div class="counter-text">DAYS</div>
      </div>
      <div class="timer">
        <div id="hoursTicker" class="countdown"></div>
        <div class="counter-text">HOURS</div>
      </div>
      <div class="timer">
        <div id="minsTicker" class="countdown"></div>
        <div class="counter-text">MINS</div>
      </div>
      <div class="timer">
        <div id="secsTicker" class="countdown"></div>
        <div class="counter-text">SECS</div>
      </div>
    </div>
  </div>
</body>

CSS

body {
  background:url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}

.countdown-wrapper {
  position: relative;
  height: 400px;
}

#countdown, #countdown-text {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}        

.countdown {
  font-weight: 900;
  font-size: 142px;
  color: #fff;
  opacity: .7;
  letter-spacing: -4px;
}

.counter-text {
  font-weight: 900;
  font-size: 40px;
  color: black;
  opacity: .8;
  text-align: center;
}


.timer {
  display: inline-block;
  margin: 10px;
}

JS

// Set the date we're counting down to
var countDownDate = new Date("Oct 7, 2017 12: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); 


  // 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 (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "EXPIRED";
  }
}, 1000);

Answer 1

您可以使用('0' + myValue).substr(-2)来修复2个字符的长度。在这种情况下，'01'将保持为'01'，'012'将保持为'12'，因为-2将从末尾剪切字符串。

Answer 2

你可以使用toLocaleString，并将最小数字设置为2，当只有一个数字时，它会以0为前缀

＆＃13;

var x = 8;

console.log(x.toLocaleString(undefined,{minimumIntegerDigits: 2}));

var y = 12;

console.log(y.toLocaleString(undefined,{minimumIntegerDigits: 2}));

＆＃13;

Answer 3

为所有时间字段执行此操作。

if((hours+"").length === 1){
    hours = "0"+hours;
}

此代码将测试变量的字符串长度，如果长度为1，则将添加数字＆＃34; 0＆＃34;在它面前。你必须把它当作一个字符串，因为整数＆＃39; 06＆＃39;将被解释为＆＃39; 6＆＃39;

Answer 4

检查所需数字是否小于10且0为字符串：

document.getElementById("daysTicker").innerHTML = (days < 10) ? ('0' + days) : days;

Answer 5

我的答案将100％正常工作

access_token

在Javascript倒计时器中创建双位数？

5 个答案: