We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

Javascript simple countdown timer

etdreaming
etdreaming asked
on
Medium Priority
1,298 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!
Comment
Watch Question

HonorGodSoftware Engineer
CERTIFIED EXPERT

Commented:
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

HonorGodSoftware Engineer
CERTIFIED EXPERT

Commented:
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

Author

Commented:
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.
Software Engineer
CERTIFIED EXPERT
Commented:
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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
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.
HonorGodSoftware Engineer
CERTIFIED EXPERT

Commented:
Not at all.  I'm just glad to be able to help.

Thanks for the grade & points.

Good luck & have a great day.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.