How To Make Double "if" Condition In A Countdown

I have the following javascript code: It is a counter that works fine for me, but now I want to do a double 'if' function. When the counter reaches zero, then it shows 'Started'.

Solution 1:

This is how you can do this:

Just need add two more hours to your current time which i have done below and then check if distance + twoHours < 0 to show 'Ended' Message

Also, you have to clearInterval(x) as well i will leave that for you to clear when you want after the condition have been met and it is ended.

Remember: Its NOT ideal to use setTimeout for this because if the user leave the page and come page the setTimeout funtion will start from 2 hours again which is not ideal in your case you want to stop it exactly after 2 hours to when its was started which will be in real time regardless of user staying on the browser / screen or not.

Just to make some correction on using innerHTML as well. Its is not rec-emended to user innerHTML at all. I have used textContent which is exactly the same. InnerHTML is not rec-emended officially by javascript MDN . You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML why its not good to use innerHTML to change text in elements.

Recreated Demo: https://jsfiddle.net/bv0odyqr/1/

Try this code and should work just fine.

function t5am() {
  // Set the date we're counting down to
  // Year, Month ( 0 for January ), Day, Hour, Minute, Second, , Milliseconds
  //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  //::::::::::::                                       ::::::::::::
  //::::::::::::              #1                       ::::::::::::
  //::::::::::::                                       ::::::::::::
  //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  //                                   (AAAA,MM,DD,HH,mm,S));
  var countDownDate = new Date(Date.UTC(2020, 05, 27, 20, 20, 0));

  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    const twoHours = new Date();
    twoHours.setHours(twoHours.getHours() + 2);
    var two = twoHours.getTime()


    // Find the distance between now an the count down date
    // GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
    var distance = countDownDate - now - (3600000 * 1);

    //Results div
    var result = document.getElementsByClassName("t5am")[0];


    // 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);

    // Output the result in an element with id="demo"
    document.getElementsByClassName("t5am")[0].textContent = days + "<span>d</span> " + hours + "<span>h</span> " +
      minutes + "<span>m</span> " + seconds + "<span>s</span><br />";


    // If the count down is over, write some text 
    if (distance < 0) {
      result.textContent = "Started";
    } else if (distance + twoHours < 0) {
      result.textContent = "Ended";
    }
  }, 1000);
}

t5am()

<div class="t5am"></div>