PDA

View Full Version : 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?


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
}


<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 stoppedWhat 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
<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>