JQuery Timer

Introduction

You might need a timer during a web development project.

Using the Code

Just use the code or modify according to your project requirement.

Example of page:

HTML

<div class="container">
      <input type="text" id="timer" name="timer" value="" readonly="true"> <br/>
      <div style="margin:0 auto; width: 150px;">
          <div class="button" id="timerStart" style="display: inline;" >Start</div>
          <div class="button" id="timerStop" style="display: inline;" >Stop</div>
          <div class="button" id="timerReset" style="display: inline;" >Reset</div>
      </div>
  </div>   <span style="font-size: 9pt;"> </span>

CSS

.container {
    margin<span class="code-none">: 20px auto<span class="code-none">;
    width<span class="code-none">: 190px<span class="code-none">;
    padding<span class="code-none">: 20px<span class="code-none">;
    display<span class="code-none">: block<span class="code-none">;
    height<span class="code-none">: 80px<span class="code-none">;
    border<span class="code-none">: 1px solid #ccc<span class="code-none">;
<span class="code-none">}  </span></span></

JavaScript

$(function() {
    $('#timer').runner({
        autostart: true
    });
    
    $('#timerStart').click(function() {
        $('#timer').runner('start');
    });
    
    $('#timerReset').click(function() {
        $('#timer').runner('reset');
    });
    
    $('#timerStop').click(function() {
        $('#timer').runner('stop');
    });
});