Results 1 to 3 of 3

Thread: Timer with an input text box.

  1. #1
    Join Date
    Nov 2007
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Timer with an input text box.

    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>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,950
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    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

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

    lrickyutah (02-24-2012)

  4. #3
    Join Date
    Nov 2007
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Thank you!

    That worked perfectly. I tweaked it a little to hide the input box once the countdown starts. Thanks!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •