Javascript simple countdown timer

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!
etdreamingAsked:
Who is Participating?
 
HonorGodConnect With a Mentor Software EngineerCommented:
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
 
HonorGodSoftware EngineerCommented:
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
 
HonorGodSoftware EngineerCommented:
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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
etdreamingAuthor 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.
0
 
etdreamingAuthor 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.
0
 
HonorGodSoftware EngineerCommented:
Not at all.  I'm just glad to be able to help.

Thanks for the grade & points.

Good luck & have a great day.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.