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?

Code:

<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

Code:

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

Thread: Timer with an input text box.

Thread Tools

Search Thread

Timer with an input text box.

The Following User Says Thank You to keyboard For This Useful Post:

Thank you!

Bookmarks

Bookmarks

Posting Permissions