Solved

Seeking javascript timer example that has start & stop buttons

Posted on 2009-07-14
4
943 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Best Way to remove the port from a URL? 15 32
Location of Buttons 4 14
Simple Total function not working 8 30
JavaScript let vs var 5 21
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…

813 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

17 Experts available now in Live!

Get 1:1 Help Now