Timer In JavaScript

ADVERTISEMENT

Author

pradeep ( Team Leader )

Yet to provide details about himself

All articles By pradeep

Recent Articles

• VB Script to Compare Two Excel Files with Multiple Tabs, Started by naimish in HTML/DHTML - JavaScript/VBScript
• Working on HTML Enities in Javascript, Started by pradeep in HTML/DHTML - JavaScript/VBScript
• Hide/Show and Toggle DIV usng JavaScript, Started by Shree Limbkar in HTML/DHTML - JavaScript/VBScript
• Detect worms in vbscript, Started by sun_kangane in HTML/DHTML - JavaScript/VBScript
• JavaScript For Beginners, Started by Obaid in HTML/DHTML - JavaScript/VBScript

Similar Articles

• Auto Suggest with Javascript, Started by pradeep in HTML/DHTML - JavaScript/VBScript
• PHP On-The-Fly!, Started by Kings in PHP
• My Project:ShutDown Timer ver 1.0, Started by alok in MFC / Win32

Well all would have at some point of time needed to make a timer in JavaScript. I have made a timer in Javascript. The script shows the timer in the status bar,you can modify it to display the timer anywhere you want. Check out the code below:

var mins,secs,TimerRunning,TimerID;
 TimerRunning=false;
 
 function Init() //call the Init function when u need to start the timer
 {
    mins=15;
    secs=0;
    StopTimer();
    StartTimer();
 }
 
 function StopTimer()
 {
    if(TimerRunning)
       clearTimeout(TimerID);
    TimerRunning=false;
 }
 
 function StartTimer()
 {
    TimerRunning=true;
    window.status="Time Remaining "+Pad(mins)+":"+Pad(secs);
    TimerID=self.setTimeout("StartTimer()",1000);
 
    Check();
    
    if(mins==0 && secs==0)
       StopTimer();
    
    if(secs==0)
    {
       mins--;
       secs=60;
    }
    secs--;
 
 }
 
 function Check()
 {
    if(mins==5 && secs==0)
       alert("You have only five minutes remaining");
    else if(mins==0 && secs==0)
    {
       alert("Your alloted time is over.");
    }
 }
 
 function Pad(number) //pads the mins/secs with a 0 if its less than 10
 {
    if(number<10)
       number=0+""+number;
    return number;
 }

[renaud4]

Can u pet it in a progress bar? like a bar that goes|||||||||

[Lizapotter]

To add the countdown script to your web page you first need to select the code and copy it into a file called count.js.

var month = '*'; // 1 through 12 or '*' within the next month, '0' for the current month
var day = '1';   // day of month or + day offset
var dow = 0;     // day of week sun=1 sat=7 or 0 for whatever day it falls on
var hour = 14;    // 0 through 23 for the hour of the day
var tz = 10;     // offset in hours from UTC to your timezone
var lab = 'cd';  // id of the entry on the page where the counter is to be inserted

function start() {displayCountdown(setCountdown(month,day,hour,tz),lab);}
loaded(lab,start);

// Countdown Javascript
// copyright 20th April 2005, 17th November 2006 by Stephen Chapman
// permission to use this Javascript on your web page is granted
// provided that all of the code in this script (including these
// comments) is used without any alteration
// you may change the start function if required
var pageLoaded = 0; window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {if (document.getElementById && document.getElementById(i) != null) f(); else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}
function setCountdown(month,day,hour,tz) {var m = month; if (month=='*') m = 0;  var c = setC(m,day,hour,tz); if (month == '*' && c < 0)  c = setC('*',day,hour,tz); return c;} function setC(month,day,hour,tz) {var toDate = new Date();if (day.substr(0,1) == '+') {var day1 = parseInt(day.substr(1));toDate.setDate(toDate.getDate()+day1);} else{toDate.setDate(day);}if (month == '*')toDate.setMonth(toDate.getMonth() + 1);else if (month > 0) { if (month <= toDate.getMonth())toDate.setFullYear(toDate.getFullYear() + 1);toDate.setMonth(month-1);}
if (dow >0) toDate.setDate(toDate.getDate()+(dow-1-toDate.getDay())%7);
toDate.setHours(hour);toDate.setMinutes(0-(tz*60));toDate.setSeconds(0);var fromDate = new Date();fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());var diffDate = new Date(0);diffDate.setMilliseconds(toDate - fromDate);return Math.floor(diffDate.valueOf()/1000);}
function displayCountdown(countdn,cd) {if (countdn < 0) document.getElementById(cd).innerHTML = "Sorry, you are too late."; else {var secs = countdn % 60; if (secs < 10) secs = '0'+secs;var countdn1 = (countdn - secs) / 60;var mins = countdn1 % 60; if (mins < 10) mins = '0'+mins;countdn1 = (countdn1 - mins) / 60;var hours = countdn1 % 24;var days = (countdn1 - hours) / 24;document.getElementById(cd).innerHTML = days+' days + '+hours+' : '+mins+' : '+secs;setTimeout('displayCountdown('+(countdn-1)+',\''+cd+'\');',999);}}

You next link it into the head of your page using the following code:

<script type="text/javascript" src="count.js">
</script>

The final step is to add the following code into the body of your web page where you want the countdown to be displayed:

<span id="cd"></span>

If you need to change the id associated with the countdown timer simply change the value from cd to your required value in both the span tag and the lab variable at the top of the script.

[Carlito]

Hi pradeep
I am new to go4expert.

Thankx for your timer, I shall embed it in my gui-webpage. But for now I want to launch files that have a <space> charactor in their name. Could you help me with that and could I show you my code?

Carlito

[gkumar]

Here's an example: to using timer in JavaScript.

<SCRIPT LANGUAGE = "JavaScript">
<!--
var secs
var timerID = null
var timerRunning = false
var delay = 1000

function InitializeTimer()
{
    // Set the length of the timer, in seconds
    secs = 10
    StopTheClock()
    StartTheTimer()
}

function StopTheClock()
{
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false
}

function StartTheTimer()
{
    if (secs==0)
    {
        StopTheClock()
        // Here's where you put something useful that's
        // supposed to happen after the allotted time.
        // For example, you could display a message:
        alert("You have just wasted 10 seconds of your life.")
    }
    else
    {
        self.status = secs
        secs = secs - 1
        timerRunning = true
        timerID = self.setTimeout("StartTheTimer()", delay)
    }
}
//-->
</SCRIPT>