Ask coding questions

← Back to all posts
How do i make a countdown timer?
Ravens0606 (36)

I need help with making a countdown timer and notification system when it goes off, could anyone help? comment pls if you can!

Answered by Whacko (263) [earned 5 cycles]
View Answer
Commentshotnewtop
Whacko (263)
var timer = 60 /* Change it to whatever you want */
var countdown = setInterval(function() {
  if (timer == 0) {
    clearInterval(); /* End */
  } else {
    timer -= 1 /* Countdown */
  };
}, 1000 /* Miloseconds */);

Using the setInterval() JavaScript code, you can make a countdown.

Ravens0606 (36)

ok, thnx! then... what HTML do i do? @JavaMaster1

Whacko (263)

@Ravens0606

<script>
var timer = 60 /* Change it to whatever you want */
var countdown = setInterval(function() {
  if (timer == 0) {
    clearInterval(); /* End */
  } else {
    timer -= 1 /* Countdown */
  };
}, 1000 /* Miloseconds */);
</script>

It's JavaScript, so you need to use <script>.

Whacko (263)

@Ravens0606 easy peasy, lemon squeezy

Whacko (263)

@Ravens0606 Did it help? I can give you a code that way a <p> element shows the countdown.

Ravens0606 (36)

yes! i would like the <p> pls too! @JavaMaster1

Whacko (263)

@Ravens0606 K, here's the code:

<p id="countdown">60</p>
<script>
var timer = 60 /* Change it to whatever you want */
var timerText = document.getElementById("countdown");
var countdown = setInterval(function() {
  if (timer == 0) {
    clearInterval(); /* End */
    timerText.value = "Out of time!";
  } else {
    timer -= 1 /* Countdown */
    timerText.value = timer;
  };
}, 1000 /* Miloseconds */);
</script>

Does it work? I used document.getElementById().

Ravens0606 (36)

Im sorry, but it didnt work! @JavaMaster1

Whacko (263)

@Ravens0606 Lemme just double-check my code...
JavaScript isn't easy!

Whacko (263)

@Ravens0606 Oops... I used value instead of innerHTML.
Here's the working code:

<p id="countdown">60</p>
<script>
var timer = 60 /* Change it to whatever you want */
var timerText = document.getElementById("countdown");
var countdown = setInterval(function() {
  if (timer == 0) {
    clearInterval(); /* End */
    timerText.innerHTML = "Out of time!";
  } else {
    timer -= 1 /* Countdown */
    timerText.innerHTML = timer;
  };
}, 1000 /* Miloseconds */);
</script>

Now it should work.

Whacko (263)

@Ravens0606 Also, you should practice your JavaScript. This website is really good. It might even help you with html!

Ravens0606 (36)

Thanks! Can i alter that in any way and have it like the person using it can choose the set time? @JavaMaster1

Whacko (263)

@Ravens0606 K, here's the code with the user input:

<div id="userInput">
<p>How many seconds do you want the timer to be? </p><input type="text" id="timerValue"><button onclick="setTimer()">Set Timer</button>
</div>

<button onclick="window.location = ''" style="display: none" id="restart">Restart</button>

<p id="countdown">0</p>

<script>
function setTimer() {
var userInput = document.getElementById("userInput");
userInput.style.display = "none";
var restart = document.getElementById("restart");
restart.style.display = "block";
var timerValue = document.getElementById("timerValue");
var timer = timerValue.value;
var timerText = document.getElementById("countdown");
clearTimeout()
var countdown = setInterval(function() {
  if (timer == 0) {
    clearInterval(); /* End */
    timerText.innerHTML = "Out of time!";
  } else {
    timerText.innerHTML = timer;
    timer -= 1 /* Countdown */
  };
}, 1000 /* Miloseconds */);
}
</script>

Yeesh, that's a lot of code! Sorry I took so long. Does it work?

Ravens0606 (36)

it works PERFECTLY! Thank you!! @JavaMaster1

NISHoriginal (7)

In Python, you can also use the time library:

import time 
sec = int(input("How many seconds do you want to countdown? : "))
for i in range(1,sec+1):
    print(i)
    time.sleep(1)
print("Time Up!!")

I hope it helped.

Ravens0606 (36)

@Bookie0 Also, do you know how to make the person set the timer?

Ravens0606 (36)

do you know how to make the person set the timer? @Bookie0

Coder100 (11052)

you can use new Date() for that @Ravens0606

Ravens0606 (36)

ok... i am a pretty new coder.. have you ever made a timer that i can refrence? @Bookie0

Ravens0606 (36)

ok... where is the countdown code? @Coder100

Bookie0 (4581)

duh you gave it to him lmao @Coder100

Coder100 (11052)

well just making sure lol @Bookie0