使用jQuery倒计时

时间:2019-05-30 09:44:35

标签: javascript jquery html

我正在进行倒数计时,实际上我现在可以正常工作,我想在0-9个数字的每一个我要附加0的位置加上0。现在要加上一个数字,例如我想要的6小时是06小时。谁能建议我。

const second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24;

let countDown = new Date('July 17, 2019 00:00:00').getTime(),
  x = setInterval(function() {

    let now = new Date().getTime(),
      distance = countDown - now;

    document.getElementById('days').innerText = Math.floor(distance / (day)),
      document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
      document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
      document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
  }, second)
if (second < 10 && minute < 10 && hour < 10 && day < 10) {
  countDown = "0" + countDown;
}
.popup-counter {
 display: flex;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="popup-counter">
  <div class="counter-timings">
    <div class="counter" id="days"></div>
    <h4>Days</h4>
  </div>
  <div class="counter-timings">
    <div class="counter" id="hours"></div>
    <h4>Hours</h4>
  </div>
  <div class="counter-timings">
    <div class="counter" id="minutes"></div>
    <h4>Minutes</h4>
  </div>
  <div class="counter-timings">
    <div class="counter" id="seconds"></div>
    <h4>Seconds</h4>
  </div>
</div>

1 个答案:

答案 0 :(得分:1)

尝试这样。

将值分配给该变量,并检查其是否小于10,然后在其保持不变之前添加零。

  

(hours <10)?'0'+ hours:hours,

const second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24;

let countDown = new Date('July 17, 2019 00:00:00').getTime(),
  x = setInterval(function() {

    let now = new Date().getTime(),
      distance = countDown - now;
    var hours =  Math.floor((distance % (day)) / (hour));
    var days =  Math.floor(distance / (day));
    var minutes =  Math.floor((distance % (hour)) / (minute));
    var seconds =  Math.floor((distance % (minute)) / second);
    document.getElementById('days').innerText = (days < 10 )?'0'+days:days,
      document.getElementById('hours').innerText = (hours < 10)?'0'+hours:hours,
      document.getElementById('minutes').innerText = (minutes < 10)?'0'+minutes:minutes,
      document.getElementById('seconds').innerText = (seconds < 10)?'0'+seconds:seconds;
  }, second)
if (second < 10 && minute < 10 && hour < 10 && day < 10) {
  countDown = "0" + countDown;
}
.popup-counter {
 display: flex;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="popup-counter">
  <div class="counter-timings">
    <div class="counter" id="days"></div>
    <h4>Days</h4>
  </div>
  <div class="counter-timings">
    <div class="counter" id="hours"></div>
    <h4>Hours</h4>
  </div>
  <div class="counter-timings">
    <div class="counter" id="minutes"></div>
    <h4>Minutes</h4>
  </div>
  <div class="counter-timings">
    <div class="counter" id="seconds"></div>
    <h4>Seconds</h4>
  </div>
</div>