Skip to content Skip to sidebar Skip to footer

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 setTimeoutfuntion 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.

functiont5am() {
  // 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 = newDate(Date.UTC(2020, 05, 27, 20, 20, 0));

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

    // Get todays date and timevar now = newDate().getTime();

    const twoHours = newDate();
    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 divvar result = document.getElementsByClassName("t5am")[0];


    // Time calculations for days, hours, minutes and secondsvar 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";
    } elseif (distance + twoHours < 0) {
      result.textContent = "Ended";
    }
  }, 1000);
}

t5am()
<divclass="t5am"></div>

Post a Comment for "How To Make Double "if" Condition In A Countdown"