Search code examples
javascriptcountdowntimer

Showing a countdown when there are less than 24 hours remaining


I am trying to get my countdown clock to appear only when there are less than 24 hours remaining. I didn't write the original code. I think it should be...

if (distance < end + ???) {

But i'm not sure what to add ???. Here is the full code...

var end = new Date('05/03/2020 20:00 UTC+1');  
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
    var now = new Date();
    var distance = end - now;

    // When countdown over show finished
    if (distance < 0) {

        clearInterval(timer);
        document.getElementById('countdown').innerHTML =
        "Finished!";

        return;
    }

    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

// Only show countdown is less than 24 hours remains
    if (distance < end + ???) {
         // document.getElementById('countdown').innerHTML = days + ':';
          document.getElementById('countdown').innerHTML = hours + ' : ';
          document.getElementById('countdown').innerHTML += minutes + ' : ';
          document.getElementById('countdown').innerHTML += seconds + '';
      }
  }

timer = setInterval(showRemaining, 1000);     

https://jsfiddle.net/yvb4dahn/3/


Solution

  • It works if you change your condition to this one if (distance < 86400000) {. That number is 24h in milliseconds.

    var end = new Date('05/03/2020 10:00 UTC+1');  
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;
    
    function showRemaining() {
        var now = new Date();
        var distance = end - now;
    
        // When countdown over show finished
        if (distance < 0) {
    
            clearInterval(timer);
            document.getElementById('countdown').innerHTML =
            "Finished!";
    
            return;
        }
        
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);
    
    // Only show countdown is less than 24 hours remains
    	if (distance < 86400000) {
             // document.getElementById('countdown').innerHTML = days + ':';
              document.getElementById('countdown').innerHTML = hours + ' : ';
              document.getElementById('countdown').innerHTML += minutes + ' : ';
              document.getElementById('countdown').innerHTML += seconds + '';
          }
      }
    
    timer = setInterval(showRemaining, 1000);    
    <div id="countdown"></div>

    More info about js dates and formats: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

    Hope it helped you :)