JQuery – Timer Start Stop

DEMO

 

JQuery – Timer with Start Stop button, source code really easy to use!

The source code:

<!DOCTYPE html>
<html>
<!-- Don't Break My b***s - Gimme Code! Project                                              -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com                                     -->
<!-- This code come with absolutely no warranty                                              -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance                                                                       -->
<head>
<title></title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){

$(function() {
    var timer = null;
    var input = document.getElementById('input');

    function tick() {
        ++input.value;
        start();        // restart the timer
    };

    function start() {  // use a one-off timer
        timer = setTimeout(tick, 1000);
    };

    function stop() {
        clearTimeout(timer);
    };

    $('#start').bind("click", start); // use .on in jQuery 1.7+
    $('#stop').bind("click", stop);

    start();  // if you want it to auto-start - remove this line if you want start with start button
});

});
</script> 
</head>
 
<body>
<input type="number" id="input" value="0" />
<input type="button" id="stop" value="stop"/>
<input type="button" id="start" value="start"/>
</body>
 
</html>

Notice:

 $('#start').bind("click", start);

1. The click on element with id=start call the function start
2. The function start() repeat the function tick() every 1 second (1000 milliseconds)
3. The function tick() add 1 unit to variable var input
4. var input is get by element with id=input (the input text box)

My official WebSite >