简体   繁体   English

如何制作没有天数的倒数计时器?

[英]How can I make a countdown timer without days?

I'm looking for a way to have a countdown timer that displays more than 24 hours instead of displaying days when there is more than one day left.我正在寻找一种方法来让倒数计时器显示超过 24 小时,而不是显示剩余一天以上的天数。 In short, it shows 26:04:32 instead of 01:02:04:32.简而言之,它显示 26:04:32 而不是 01:02:04:32。

I was working with this, but got stuck.我正在处理这个,但被卡住了。

<script> 
  (function () {

    var deadline = '2022/09/07 00:00';

    function pad(num, size) {
      var s = "0" + num;
      return s.substr(s.length - size);
    }

    // fixes "Date.parse(date)" on safari
    function parseDate(date) {
      const parsed = Date.parse(date);
      if (!isNaN(parsed)) return parsed
      return Date.parse(date.replace(/-/g, '/').replace(/[a-z]+/gi, ' '));
    }

    function getTimeRemaining(endtime) {
      let total = parseDate(endtime) - Date.parse(new Date())
      let seconds = Math.floor((total / 1000) % 60)
      let minutes = Math.floor((total / 1000 / 60) % 60)
      let hours = Math.floor((total / (1000 * 60 * 60)) % 24)
      let days = Math.floor(total / (1000 * 60 * 60 * 24))

      return { total, days, hours, minutes, seconds };
    }

    function clock(id, endtime) {
      let days = document.getElementById(id + '-days')
      let hours = document.getElementById(id + '-hours')
      let minutes = document.getElementById(id + '-minutes')
      let seconds = document.getElementById(id + '-seconds')

      var timeinterval = setInterval(function () {
        var time = getTimeRemaining(endtime);

        if (time.total <= 0) {
          clearInterval(timeinterval);
        } else {
          days.innerHTML = pad(time.days, 2);
          hours.innerHTML = pad((time.hours, 2) + (24 * (time.days, 2)), 2);
          minutes.innerHTML = pad(time.minutes, 2);
          seconds.innerHTML = pad(time.seconds, 2);
        }
      }, 1000);
    }

    clock('js-clock', deadline);
  })();
</script>

Just don't modulo ( % ) the hours with 24, and get rid of everything related to days :只是不要以 24 为模hours% ),并摆脱与days相关的所有内容:

let hours = Math.floor((total / (1000 * 60 * 60)));  // will happily go > 24

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM