Log in

View Full Version : Timer with an input text box.


lrickyutah
02-24-2012, 12:45 AM
I found this little bit of code on a different site and it's perfect for what I need, ALMOST. I've been fiddling with this all day and I just can't seem to create a box that the user can enter how many minutes they want the timer to take. I can hard code the time in, but that's not what I'm looking for.

Any help?



<html>
<body>
<div id="countdown"></div>
<div id="notifier"></div>
<script type="text/javascript">

function display( notifier, str ) {
document.getElementById(notifier).innerHTML = str;
}

function toMinuteAndSecond( x ) {
return Math.floor(x/60) + ":" + x%60;
}

function setTimer( remain, actions ) {
(function countdown() {
display("countdown", toMinuteAndSecond(remain));
actions[remain] && actions[remain]();
(remain -= 1) >= 0 && setTimeout(arguments.callee, 1000);
})();
}

setTimer(60, {
10: function () { display("notifier", "Just 10 seconds to go"); },
5: function () { display("notifier", "5 seconds left"); },
0: function () { display("notifier", "Time is up"); }
});

</script>
</body>
</html>
keyboard
02-24-2012, 03:47 AM
<html>
<body>
<div id="countdown"></div>
<div id="notifier"></div>
<script type="text/javascript">
function startTimer() {
userInput = document.getElementById('userTime').value;
if(userInput.length == 0){
alert("Please enter a value");
} else {
var numericExpression = /^[0-9]+$/;
if(!userInput.match(numericExpression)){
alert("Please enter a number")
} else {

function display( notifier, str ) {
document.getElementById(notifier).innerHTML = str;
}

function toMinuteAndSecond( x ) {
return Math.floor(x/60) + ":" + x%60;
}

function setTimer( remain, actions ) {
(function countdown() {
display("countdown", toMinuteAndSecond(remain));
actions[remain] && actions[remain]();
(remain -= 1) >= 0 && setTimeout(arguments.callee, 1000);
})();
}

setTimer(userInput, {
10: function () { display("notifier", "Just 10 seconds to go"); },
5: function () { display("notifier", "5 seconds left"); },
0: function () { display("notifier", "Time is up"); }
});
}
}
}
</script>
Please Enter A Number: <input type="text" id="userTime" />
<input type="button" value="Go" onclick="startTimer()" />
</body>
</html>

Tested in IE9

Keyboard1333
lrickyutah
02-24-2012, 05:55 AM
That worked perfectly. I tweaked it a little to hide the input box once the countdown starts. Thanks!