JavasSript Countdown Script

Question

I need a simple script for JavaScript countdown for quiz preparation.

Initially quiz page loads, countdown timer to be start for 30mins
After 30mins over, it shows alert message to user.

Below is the code which am using, but after 30mins it decrementing..

<html>
<head>
<title>Countdown</title>
<script type="text/javascript">

var mins = 30;


var secs = mins * 60;
function countdown() {
    setTimeout('Decrement()',1000);
}
function Decrement() {
    if (document.getElementById) {
        minutes = document.getElementById("minutes");
        seconds = document.getElementById("seconds");
        if (seconds < 59) {
            seconds.value = secs;
        } else {
            minutes.value = getminutes();
            seconds.value = getseconds();
        }
        secs--;
        setTimeout('Decrement()',1000);
    }
}
function getminutes() {
    mins = Math.floor(secs / 60);
    return mins;
}
function getseconds() {
    return secs-Math.round(mins *60);
}
</script>
</head>
<body>

<div id="timer">
    This is only valid for the next <input id="minutes" type="text" style="width: 14px; border: none; background-color:none; font-size: 16px; font-weight: bold;">  minutes and <input id="seconds" type="text" style="width: 26px; border: none; background-color:none; font-size: 16px; font-weight: bold;"> seconds.
</div>
<script>
countdown();
</script>

Thanks in Advance.

You need to provide some code. You need to have shown some effort or have done some research. If you can do that, then we can help you and not solve it for you. — sshashank124, Mar 17 '14 at 11:29
look at this post. http://stackoverflow.com/questions/532553/javascript-countdown — Zafar, Mar 17 '14 at 11:38

score 1 · Answer 1 · answered Mar 17 '14 at 11:31

You can use the setTimeout() function

setTimeout(function()
{
    alert("Hello");

},3000);

This will show a popup dialog with 'Hello' after 3 seconds. The 3000 refers to miliseconds so just convert 30 minutes to miliseconds.

The code in the curly braces will execute once the time limit has reached.

http://www.w3schools.com/jsref/met_win_settimeout.asp

bhb · Accepted Answer · 2014-03-17T11:49:16.983

Simply googling gave me many examples and lib files

http://flipclockjs.com/

https://mindgrader.com/tutorials/1-how-to-create-a-simple-javascript-countdown-timer

http://www.gieson.com/Library/projects/utilities/countdown/

http://blog.smalldo.gs/2013/12/create-simple-countdown/

Update Corrected your js.

var mins = 1;
var secs = mins * 60;

function Decrement() {
    minutes = document.getElementById("minutes");
    seconds = document.getElementById("seconds");
    if (seconds < 59) {
        seconds.value = secs;
    } else {
        minutes.value = getminutes();
        seconds.value = getseconds();
    }
    secs--;

    if (secs <= 0 && mins <= 0) {
        alert(11);
        return;
    }
    setTimeout(function () {
        Decrement()
    }, 1000);
}

function getminutes() {
    mins = Math.floor(secs / 60);
    return mins;
}

function getseconds() {
    return secs - Math.round(mins * 60);
}

function countdown() {
    setTimeout(function () {
        Decrement()
    }, 1000);
}

countdown();

FIDDLE

Cheers!!

Working good, thank you so much.. :) – Anandh Mar 17 '14 at 12:12 — Anandh, Mar 17 '14 at 12:12

Mr.TK · Answer 3 · 2014-03-17T11:35:36.883

0

Simply use setInterval method and set it to 1000. (1 second)

Increment each second to a global value.

var timePassed =0;
...
timePassed++;

If you reach 1800 seconds thats it :)

It's not a rocket science, so You can do it your self :)

PS: store a time in localStorage or cookie if You need to refresh page or go to next page.

edited Mar 17 '14 at 11:35

answered Mar 17 '14 at 11:29

Mr.TK

1,743
2
17
22

JavasSript Countdown Script

3 Answers3