Solved

Seeking javascript timer example that has start & stop buttons

Posted on 2009-07-14
4
941 Views
Last Modified: 2013-11-19
I'm looking for an example of a javascript timer that displays both hours and seconds, and that  increments and displays in realtime.  The example needs to have start / stop buttons on it which start and stop the timer when clicked.  

Thanks,
- Yvan
0
Comment
Question by:egoselfaxis
  • 2
4 Comments
 
LVL 4

Expert Comment

by:SadafRasheed
ID: 24852265
0
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 24853589
Like this?
<html>

<body>

<script type='text/javascript'>

  var timerID  = 0;

  var started  = null;

  var target   = null;

  var remnant  = 0;
 

  function field( id ) {

    var ele = document.getElementById( id );

    if ( !ele ) {

      alert( 'Specified element not found. id="' + id + '"' );

    }

    return ele;

  }

  

  function UpdateTimer() {

    function D2( val ) {

      return ( ( val < 10 ) ? '0' : '' ) + val

    }

    

    var S = Math.floor( ( ( new Date() ).getTime() - started.getTime() ) / 1000 );

    var H = Math.floor( S / 3600 );

    S -= H * 3600;

    var M = Math.floor( S / 60 );

    S -= M * 60;

    

//  if ( timer.getSeconds() % 60 == 0 ) {

      target.value = D2( H ) + ':' + D2( M ) + ':' + D2( S );

//  }
 

   // Check once per second

    timerID = setTimeout( 'UpdateTimer()', 1000 );

  }
 

  function enable( id ) {

    var button = field( id );

    if ( button ) {

      button.removeAttribute( 'disabled' );

    }

  }
 

  function disable( id ) {

    var button = field( id );

    if ( button ) {

      button.disabled = 'disabled';

    }

  }
 

  function Start() {

    if ( target ) {

      started  = new Date();

      started.setTime( started.getTime() - ( remnant * 1000 ) );

      timerID  = setTimeout( 'UpdateTimer()', 1000 ) ;

      disable( 'start' );

      enable( 'stop' );

    }

  }
 

  function Stop() {

    clearTimeout( timerID );

    timerID  = 0;

    enable( 'start' );

    disable( 'stop' );

    var HMS = target.value.split( ':' );

    remnant = parseInt( HMS[ 0 ], 10 ) * 3600 + parseInt( HMS[ 1 ], 10 ) * 60 + parseInt( HMS[ 2 ], 10 );

  }

 

  function Reset() {

    target = field( 'Time' );

    if ( target ) {

      target.value = '00:00:00';

      enable( 'start' );

    } else {

      disable( 'start' );

    }

    disable( 'stop' );

  }

  

  function validate( obj ) {

    if ( !/^\d{2}:\d{2}\d{2}$/.test( obj.value ) ) {

      alert( 'Unexpected format: HH:MM:SS' );

      obj.value = '00:00:00';

    }

  }

</script>

<body onload='Reset()' onunload='Stop()'>

  <form name='myTimer'>  

    <input type='text'   id='Time'  size='5' onchange='validate(this.value)'>

    <input type='button' id='start' value='Start' onclick='Start()'>

    <input type='button' id='stop'  value='Stop'  onclick='Stop()'>

  </form>

</body>

</html>

Open in new window

0
 

Author Comment

by:egoselfaxis
ID: 24853701
Perfect - thanks!

- Yvan
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24853778
You are very welcome.

Thanks for the grade & points.

Good luck & have a great day.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now