countdown clock

**mpowers49** · 10-29-2015, 05:02 PM

I am new to js and I am trying tutorials for a countdown clock with buttons to activate the functions. I have gotten it to start and countdown to 0 then alert a message and I got a clear button that clears it to 0 and a stop button to stop at whatever time before 0. My problem is I have not been able to get a button to work to resume the countdown at the time stopped. Was wondering if anyone can help out? Here is the code I have for the 3 buttons. How can I do a function for the time it is stopped at?

Code:

var running = false
var endTime = null
var timerID = null
function startTimer() {
    running = true
    now = new Date()
    now = now.getTime()
    // change last multiple for the number of minutes
    endTime = now + (1000 * 30 * 1)
    showCountDown()
}
function showCountDown() {
    var now = new Date()
    now = now.getTime()
    if (endTime - now <= 0) {
        stopTimer()

alert("Time is up. Get back to work!.")
    } else {
        var delta = new Date(endTime - now)
        var theMin = delta.getMinutes()
        var theSec = delta.getSeconds()
        var theTime = theMin
        theTime += ((theSec < 10) ? ":0" : ":") + theSec
        document.forms[0].timerDisplay.value = theTime
        if (running) {
            timerID = setTimeout("showCountDown()",1000)
        }
    }
}
function stopTimer() {
    clearTimeout(timerID)
    running = false
    document.forms[0].timerDisplay.value = "0:00"
}

function stopTimertwo() {
    clearTimeout(timerID)
    running = false
    document.forms[0].timerDisplay.value = theTime
}

Code:

<html>
<head>
<title>Countdown clock</title>

<script type = "text/javascript" src="clock.js"></script>

</head>

<body>

<FORM>
<INPUT TYPE="button" NAME="startTime" VALUE="Start/Reset"
 onClick="startTimer()">
 <INPUT TYPE="button" NAME="stopTime" VALUE="Stop Timer"
 onClick="stopTimertwo()">
<INPUT TYPE="button" NAME="clearTime" VALUE="Clear Timer"
 onClick="stopTimer()">
<INPUT TYPE="text" NAME="timerDisplay" VALUE="0:30">
</FORM>

</body>
</html>

**Beverleyh** · 10-29-2015, 05:50 PM

I have not been able to get a button to work to resume the countdown at the time stopped

What have you tried so far?

My thoughts - I would turn stopTimertwo() into a toggle.

The first problem I see is that the theTime variable isn't available outside of the showCountDown() function, so try defining it at the start, outside all the functions instead, then it will be available from within stopTimertwo().

The next problem I see is that you'd want to (re)use the startTimer() function to resume the timer, but to do that, you'll need to adapt it slightly so that the seconds from stopTimertwo() can be passed in to it as a variable (so that it resumes from the countdown time and not a fixed 30 seconds count). You'll pass the countdown time from the theTime variable except, 3rd problem, the formatting of theTime will be something like "0:14", so you'll need to run it through a function to convert it back to straight seconds. This looks promising http://stackoverflow.com/a/9640417

Post back with what you've tried and I'll take a look later.

ps - Don't forget to end your lines with semi-colons otherwise minifiers and such will mung your code.

**vwphillips** · 10-30-2015, 11:00 AM

Code:

<html>
<head>
<title>Countdown clock</title>

<script type = "text/javascript">

var endTime = null
var timerID = null

function startTimer(t) {
    var t=t||document.getElementById('timerDisplay').value||'0:30';

    t=t.split(':'); // split the value into minutes and seconds
    if (isFinite(t[0])*1&&isFinite(t[1])*1){ // check the format of t is correct
     t=t[0]*60+t[1]*1; // covert to seconds
     var now = new Date().getTime();
    // change last multiple for the number of minutes
     endTime = now + (1000 * t * 1);
     showCountDown();
    }
}

function showCountDown() {
    var now = new Date();
    now = now.getTime();
    if (endTime - now <= 0) {
        stopTimer();

alert("Time is up. Get back to work!.");
    } else {
        var delta = new Date(endTime - now);
        var theMin = delta.getMinutes();
        var theSec = delta.getSeconds();
        var theTime = theMin;
        theTime += ((theSec < 10) ? ":0" : ":") + theSec;
        document.getElementById('timerDisplay').value = theTime;
        timerID = setTimeout(function(){ showCountDown(); },1000);
    }
}
function stopTimer() {
    clearTimeout(timerID);
    document.getElementById('timerDisplay').value = "0:00"
}

function stopTimertwo() {
    clearTimeout(timerID);
    running = false;
//    document.forms[0].timerDisplay.value = theTime //  theTime is a local variabe only accessbable in function  showCountDown()
}

function setTimer(t) {
    clearTimeout(timerID);
    document.getElementById('timerDisplay').value = t;
}

</script>

</head>

<body>

<FORM>
<INPUT TYPE="button" NAME="startTime" VALUE="Start"
 onClick="startTimer()">
 <INPUT TYPE="button" NAME="stopTime" VALUE="Stop Timer"
 onClick="stopTimertwo()">
<INPUT TYPE="button" NAME="clearTime" VALUE="Clear Timer"
 onClick="stopTimer()">
<INPUT TYPE="button" NAME="setTime" VALUE="Set Timer"
 onClick="setTimer('0:45')">
<INPUT TYPE="text" NAME="timerDisplay" id="timerDisplay" VALUE="0:30">
</FORM>


</body>
</html>

Thread: countdown clock

Thread Tools

Search Thread

countdown clock

Similar Threads

Countdown clock

Problem with countdown clock

Countdown clock

Countdown clock

Countdown clock on website?

Bookmarks

Bookmarks

Posting Permissions