Home > database >  How can I make a countdown timer without days?
How can I make a countdown timer without days?

Time:09-06

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. In short, it shows 26:04:32 instead of 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>

CodePudding user response:

Just don't modulo (%) the hours with 24, and get rid of everything related to days:

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