JavaScript count down

How To Stop JavaScript Countdown

One very common project you will want to give a try when learning JavaScript is the count down, I did like to stress some cool uses of JavaScript countdown, with JavaScript count down, you can specify a promo period, you can specify a page access period and request for login or sign up before continuation. However, it’s a little bit complicating when you find out that your countdown does not have an end, meaning, it does not stop even when the time has elapsed. Before we jump to the code that illustrate a perfect use of the JavaScript countdown and how to stop it, let this keyword “clearTimeout” be a new addition to your  heart dictionary.  The code below is use to show how to set a countdown and how to stop it.

Let us go with a full HTML structure

<!DOCTYPE html>

<html>

  <title>Test Code</title>

  <head> </head>

  <body>

<div class=”main”>

  <div class=”timer”>Time: <span id=”time”> 5:00 </span> minutes</div>

  <button id=”start” class=”button”>Start</button>

  <p>Click the button to begin the quiz. Good Luck!</p>

</div>

Just to make our JavaScript countdown practice look good a bit, lets add the following css

.main {

  width: 200px;

  height: 350px;

  border: 2px solid gray;

  border-radius: 10px;

  padding: 10px;

  display: flex;

  justify-content: space-around;

  align-items: center;

  flex-direction: column;

  color: white;

  background-color: seagreen;

}

#time {

  color: orange;

  font-size: 5rem;

  font-weight: 700;

}

button {

  padding: 5px 8px;

  color: white;

  width: 150px;

  background-color: green;

  outline: none;

  font-weight: 500;

  border: 2px solid gray;

  border-radius: 15px;

  box-shadow: -2px -2px 0px #ffffff;

  transition: 0.8s linear all;

  cursor: pointer;

}

button:hover {

  color: orange;

  background-color: black;

  box-shadow: none;

}

Your layout should look like this if you add those CSS styling

javascript countdown

Using JavaScript to stop the count down timer

      document.getElementById(“time”).innerHTML = 05 + “:” + 00;

      document.getElementById(“start”).addEventListener(“click”, startTimer);

      var timerRef = null;

      function startTimer() {

        var p_time = document.getElementById(“time”).innerHTML;

        var timeArray = p_time.split(/[:]+/);

//setting min to hold timeArray

        var min = timeArray[0];

        var sec = checkSecond(timeArray[1] – 1);

        if (sec == 59) {

          min = min – 1;

        }

        document.getElementById(“time”).innerHTML = min + “:” + sec;

        if (min <= 0 && sec == 0) {

          clearTimeout(timerRef);

          alert(“Time is up!”);

          return;

        }

        timerRef = setTimeout(startTimer, 1000);

      }

      function checkSecond(seconds) {

        if (seconds < 10 && seconds >= 0) {

          seconds = “0” + seconds;

        }

        if (seconds < 0) {

          seconds = “59”;

        }

        return seconds;

      }

If you run the code above, you will have perfect example of a countdown timer which has a clearTimeout method. Note, it’s the clearTimeout method that clear the count down on completion, you can adjust the time to suit your preference. you can learn JavaScript hover effect by clicking here

Leave a Comment

Your email address will not be published. Required fields are marked *