JavaScript Counter

Most of this information is available on the net. I have compiled this into a single document for easy reading.

JavaScript code is after the descriptions.

HTML

<h2>Show Clock</h2>
<p><strong>Date & Time:</strong> <span id="showClockContainer"></span></p>
           
<p><strong>Time:</strong> <span id="showClockContainerFalse"></span></p>
           
           
<h2>Counter Up</h2>
<p id="counterUp"></p>
           
<h2>Counter Down</h2>
<p id="counterDown"></p>
           
<p>To stop the counter, use <em>counter.stopCounter = true</em></p>

JavaScript On Page

<script type="text/javascript">
        $(document).ready(function () {
            //onload expand js tools
            $("#jstools").click();
           
            counter.showClock(document.getElementById('showClockContainer'),true);
            counter.showClock(document.getElementById('showClockContainerFalse'),false);
           
            counter.countUp(document.getElementById('counterUp'));
           
            counter.countDown(document.getElementById('counterDown'),30);
           
        });
    </script>

Counter.js

var counter = {
    stopCounter: false, //to stop the countDown or countUp counters via code
    countDown: function(objToShowIn, nMaxSeconds){
        //objToShowIn  = obj passed as document.getElementById
        //nMaxSeconds  = important for showing DESCENDING display, this is the max number of seonds to start from
        var milisec = 0;
        var seconds = nMaxSeconds;
        var timer   = "";
       
        var blnTextBox = false;
        if(objToShowIn.type != null && objToShowIn.type.toUpperCase() == 'TEXT'){
            blnTextBox = true;
            objToShowIn.value = ""+seconds
        }
        else
            objToShowIn.innerHTML = ""+seconds;
                   
        var displayCounterDown = function(){
            if (milisec<=0){milisec=9; seconds-=1;}
            if (seconds<=-1){milisec=0; seconds+=1;}
            else milisec-=1;
            if(seconds == 0) timer = "";
            else timer = ""+seconds+"."+milisec+" sec";
           
            if(blnTextBox) objToShowIn.value = timer;
            else objToShowIn.innerHTML = timer;           
            if(timer != "" && !counter.stopCounter){ //if timer is 0 then do not show
                setTimeout(displayCounterDown,100);   
            }
        }
        //may have been over written by the client code, reset
        counter.stopCounter = false;
        //start counter down
        displayCounterDown();
    },
    countUp: function(objToShowIn){
        //objToShowIn  = obj passed as document.getElementById
        var milisec = 0;
        var seconds = 0;
        var timer   = 0;
        var hr         = 0;
        var min     = 0;
        var sec     = 0;
       
        var displayCounterUp = function(){
            if (milisec>=9){milisec=0; seconds+=1;}
            else milisec+=1;
           
            min = parseInt(seconds/60);
            if(min > 59){hr = parseInt(min/60); min = parseInt(min%60);}  
            sec = parseInt(seconds%60);
           
            if(hr < 10) timer = "0";
            timer += hr;
            timer += ":";
            if(min < 10) timer += "0";
            timer += min;
            timer += ":";
            if(sec < 10) timer += "0";
            timer += sec;
            timer += ":";
            timer += milisec;
            //timer = ""+seconds+"."+milisec+" sec";
         
            if(objToShowIn.type != null && objToShowIn.type.toUpperCase() == 'TEXT')
                objToShowIn.value = timer;
            else
                objToShowIn.innerHTML = timer;
            if(!counter.stopCounter)
                  setTimeout(displayCounterUp,100);
        }
        //may have been over written by the client code, reset
        counter.stopCounter = false;
        //start counter up
        displayCounterUp();
    },
    showClock: function(objToShowIn, blnDate){
        //objToShowIn  = obj passed as document.getElementById
        //if blndate is true then day and date will get included also
        if(blnDate == null || blnDate == 'undefined') blnDate = false;
        var clockID  = 0;
        var toShow = "";
       
        var updateClockTime = function() {
            killClock();
            var d = new Date();
            toShow = "";
            if(blnDate) toShow += d.toLocaleString();
            else{
                var cHour = d.getHours();
                var cMin = ""+d.getMinutes();
                var cSec = ""+d.getSeconds();
                var cType = "AM";
                if(cHour >= 12) cType = "PM";
                if(cHour == 0) cHour = 12;
                else if(cHour > 12) cHour = cHour - 12;
                if(String(cHour).length == 1) cHour = "0"+cHour;
                if(cMin.length == 1) cMin = "0"+cMin;
                if(cSec.length == 1) cSec = "0"+cSec;
                toShow += cHour + ":" + cMin + ":" + cSec + " " + cType;
             }
            if(objToShowIn.type != null && objToShowIn.type.toUpperCase() == 'TEXT')
                objToShowIn.value = toShow;//toString();
            else
                objToShowIn.innerHTML = toShow;//toString();       
             clockID = setTimeout(updateClockTime, 1000);
        }
        var killClock = function() {
            if(clockID) {clearTimeout(clockID);clockID  = 0;}
        }
        var startClock = function(){
            clockID = setTimeout(updateClockTime, 500);
        }
        //start the clock
        startClock();
    }
}