How do i make a countdown timer?

Ask coding questions

How do i make a countdown timer?

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 [earned 5 cycles]

Voters

Comments

hot new top

Whacko


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.

icelite

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

Whacko

@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

@Ravens0606 easy peasy, lemon squeezy

icelite

@JavaMaster1 ah ok

Whacko

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

icelite

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

icelite

but thnx! @JavaMaster1

Whacko

@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().

icelite

Im sorry, but it didnt work! @JavaMaster1

Whacko

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

icelite

Ok! and... I agree! @JavaMaster1

Whacko

@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

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

icelite

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

icelite

Ok! @JavaMaster1

Whacko

@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?

icelite

it works PERFECTLY! Thank you!! @JavaMaster1

Whacko

@Ravens0606 Do I get the cycles?

icelite

yep! you get 5 cycles! @JavaMaster1

Whacko

@Ravens0606 Thanks!

NISHoriginal

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.

thnx! @NISHoriginal

Not at school

Hi what language?

@Bookie0 HTML

You'll need to know some JS as well, and maybe css to make it nicer.

check this out for making the timer