?
Solved

Javascript simple countdown timer

Posted on 2009-02-13
6
Medium Priority
?
1,282 Views
Last Modified: 2012-05-06
I'm no expert with javascript, but I am an expert with copy and paste so this is what I'm looking for and if I may be a bit forward I'm really really looking for some custom script and not links to dig through other web sites....here goes; I am looking for a countdown timer that only displays minutes and seconds and counts down by seconds from 30 minutes.  I would also like to be able to edit the script for font type and size and colors.  The end result would be something like this when it first loads and having it count down one second at a time until the 30 minutes is up.  

30:00

Once it has finished running I don't need it to do anything special.  thx!
0
Comment
Question by:etdreaming
  • 4
  • 2
6 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 23635548
Something like this perhaps?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Countdown Timer</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<script type='text/javascript'>
  //------------------------------------------------------------------
  // Global variables
  //------------------------------------------------------------------
  var timerID = null
  var started = null
 
  //------------------------------------------------------------------
  // Name: D2()
  // Role: Prepend a '0' (if necessary) to make a two digit number
  //------------------------------------------------------------------
  function D2( val ) {
    return ( val < 10 ) ? '0' + val : val;
  }
 
  //------------------------------------------------------------------
  // Name: field()
  // Role: Look for document element having specified ID attribute
  //------------------------------------------------------------------
  function field( id ) {
    var obj = document.getElementById( id );
    if ( !obj ) {
      alert( 'Specified element not found: id = "' + id + '"' );
    }
    return obj;
  }
 
  //------------------------------------------------------------------
  // Name: Minutes()
  // Role: Extract the minutes portion of a HH:MM:SS value
  //------------------------------------------------------------------
  function Minutes( val ) {
    var d = val.split( ':' );
    return parseInt( d[ 1 ], 10 );
  }
 
  //------------------------------------------------------------------
  // Name: Seconds()
  // Role: Extract the minutes portion of a HH:MM:SS value
  //------------------------------------------------------------------
  function Seconds( val ) {
    var d = val.split( ':' );
    return parseInt( d[ 2 ], 10 );
  }
 
  //------------------------------------------------------------------
  // Name: reset_clock()
  // Role: Reset timer field value
  //------------------------------------------------------------------
  function reset_clock( id ) {
    var obj = field( id )
    var ss  = field( 'startstop' )
    if ( obj ) {
      if ( timerID ) {
        clearTimeout( timerID )
        timerID = null
        started = null
      }
      obj.value = '30:00'
      ss.value  = 'start'
    }
  }
 
  //------------------------------------------------------------------
  // Name: HMS2s()
  // Role: Convert HH:MM:SS time to seconds
  //------------------------------------------------------------------
  function HMS2s( val ) {
    return ( ( ( Hours( val ) * 60 ) + Minutes( val ) ) * 60 ) + Seconds( val );
  }
 
  //------------------------------------------------------------------
  // Name: start_stop()
  // Role: Used to start/stop the specified timer
  //------------------------------------------------------------------
  function start_stop( obj, id ) {
    var timer = field( id )
    if ( timer ) {
      var val = timer.value;       // Current MM:SS value
      if ( obj && obj.type == 'button' ) {
        if ( obj.value == 'start' ) {
          obj.value = 'stop';            // change button from start -> stop
          started = ( new Date() ).getTime()
          showTimer( id )
        } else {
          clearTimeout( timerID )
          obj.value = 'start';           // change button from stop  -> start
          timerID   = null
          started   = null
        }
      } else {
        alert( 'Specified element missing, or of wrong type' );
      }
    }
  }
 
  //------------------------------------------------------------------
  // Name: showTimer()
  // Role: Used to update the specified timer field
  //------------------------------------------------------------------
  function showTimer( id ) {
    var obj = field( id )
    if ( obj && obj.nodeName == 'INPUT' ) {
      var current = ( new Date() ).getTime()
      var diff  = ( current - started ) / 1000
      var done  = 0
      if ( diff > 0 ) {
        var val = 1800 - ( parseInt( diff ) )
        var min = parseInt( val / 60 )
        var sec = parseInt( val % 60 )
        obj.value = D2( min ) + ':' + D2( sec )
        if ( val == 0 ) {
          done = 1
        }
      }
      timerID = setTimeout( 'showTimer("' + id + '")', 100 );
    }
  }
 
</script>
</head>
 
<body onload='reset_clock("clock")'>
<form name='dummy' action=''>
  <table border='1'>
    <tr>
      <td>
        &nbsp;<input type='button' value='&nbsp;reset' onClick='reset_clock("clock");'>
      </td>
      <td>
        <input type='button' value='start' id='startstop' onClick='start_stop(this,"clock");'>
      </td>
      <td>
        <input type='text'   id='clock' value='' onFocus='this.blur()' size="8" readonly>
      </td>
    </tr>
  </table>
</form>
<div id='debug'></div>
</body>
</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 23635568
Oops, forgot to stop at zero
  //------------------------------------------------------------------
  // Name: showTimer()
  // Role: Used to update the specified timer field
  //------------------------------------------------------------------
  function showTimer( id ) {
    var obj = field( id )
    if ( obj && obj.nodeName == 'INPUT' ) {
      var current = ( new Date() ).getTime()
      var diff  = ( current - started ) / 1000
      var done  = 0
      if ( diff > 0 ) {
        var val = 1800 - ( parseInt( diff ) )
        var min = parseInt( val / 60 )
        var sec = parseInt( val % 60 )
        obj.value = D2( min ) + ':' + D2( sec )
        if ( val == 0 ) {
          done = 1
        }
      }
      if ( !done ) {
        timerID = setTimeout( 'showTimer("' + id + '")', 100 );
      }
    }
  }

Open in new window

0
 

Author Comment

by:etdreaming
ID: 23636727
I have a web site that sort of takes care of the tough stuff for me.  I just paste my js into their wizard and that does the trick.  I just tried it with this and nothing happens.  Now, I'm not very knowledgeable with js, so I'm not sure how else to test this....I copied the code into notebook and saved is as .js and then tried opening it with explorer and still nothing.  Am I doing something wrong?  thx.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 41

Accepted Solution

by:
HonorGod earned 2000 total points
ID: 23637585
Sorry, but I don't understand the problem you are having, or the question you are asking.

Are you asking for a "stand-alone" javascript file that can be easily referenced by some HTML?

e.g., something like:




<script type='text/javascript' src='timerScript.js'></script>
<script type='text/javascript'>
  var oldOnload = window.onload
  window.onload = function() {
    if ( oldOnload ) {
      oldOnload()
    }
    reset_clock('clock')
  }
</script>

Open in new window

0
 

Author Comment

by:etdreaming
ID: 23637759
You know what, now that you sent that last post I understand what I'm doing wrong.  I actually use js for two different projects and I'm getting one confused with the other.  What you originally sent is just what I need.  Sorry for the confusion.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 23638531
Not at all.  I'm just glad to be able to help.

Thanks for the grade & points.

Good luck & have a great day.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Sometimes MS breaks things just for fun... In Access 2003, only the maximum allowable SQL string length could cause problems as you built a recordset. Now, when using string data in a WHERE clause, the 'identifier' maximum is 128 characters. So, …
With more and more companies allowing their employees to work remotely, it begs the question: What are some of the security risks involved with remote employees and what actions should we take to secure them?
Integration Management Part 2
Is your data getting by on basic protection measures? In today’s climate of debilitating malware and ransomware—like WannaCry—that may not be enough. You need to establish more than basics, like a recovery plan that protects both data and endpoints.…
Suggested Courses
Course of the Month13 days, 21 hours left to enroll

809 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