mootools

Simple Timer




<input style="width:50px;" type="button" id="switch" value="Start"/>

<span id="seconds">0</span> 

second<span id="plural">s</span>



<script type="text/javascript" language="javascript">

var time = 0;

var stid = 0;

$('switch').addEvent('click',function() {

  if (time===0) {

    stid = setTimeout('timeup()',1000);

    $('seconds').setHTML('0');

    $('switch').setProperty('value','Stop');

  } else {

    clearTimeout(stid);

    $('seconds').setHTML(time);

    $('switch').setProperty('value','Start');

    time = 0;

  }

});

function timeup() {

  time += 1;

  $('plural').setHTML(((time===1)?'':'s'));

  $('seconds').setHTML(time);

  stid = setTimeout('timeup()',1000);

}

</script>

This simple javascript timer using mootools 1.11 doesn't need much explanation. The trickiest part of this is the global javascript variable


stid

. Each time a new


setTimeout

is instantiated it returns a unique id for it's timeout. The


clearTimeout

function takes a single parameter - the unique id that should be canceled.

Leave a comment if there is more explanation I can do regarding this.

Last Updated: 2009-02-25 10:35:10