Timer In JavaScript

Discussion in 'JavaScript and AJAX' started by pradeep, Jun 29, 2005.

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    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:

    Code:
    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;
     }
     
    shabbir and kien_vn like this.
  2. renaud4

    renaud4 New Member

    Joined:
    Feb 8, 2009
    Messages:
    6
    Likes Received:
    0
    Trophy Points:
    0
    Can u pet it in a progress bar? like a bar that goes|||||||||
     
  3. Lizapotter

    Lizapotter New Member

    Joined:
    Feb 24, 2009
    Messages:
    17
    Likes Received:
    5
    Trophy Points:
    0
    Occupation:
    Web Design London
    Location:
    UK
    Home Page:
    http://www.codastar.com/
    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.
    Code:
    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:

    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:

    Code:
    <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.
     
    dshirac and shabbir like this.
  4. Carlito

    Carlito New Member

    Joined:
    Apr 30, 2009
    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Construction
    Location:
    Montreal
    Home Page:
    http://www.xznn.com
    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
     
  5. gkumar

    gkumar New Member

    Joined:
    Jun 16, 2009
    Messages:
    58
    Likes Received:
    5
    Trophy Points:
    0
    Here's an example: to using timer in JavaScript.
    Code:
    <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>
     
    Last edited by a moderator: Jun 18, 2009
  6. kien_vn

    kien_vn New Member

    Joined:
    Aug 31, 2010
    Messages:
    12
    Likes Received:
    0
    Trophy Points:
    0
    this is very useful topic
     
  7. Full Zip Hoody

    Full Zip Hoody New Member

    Joined:
    Sep 29, 2010
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Programer
    Location:
    US of A
    this was sooooo simple!!
     
  8. dshirac

    dshirac New Member

    Joined:
    Jan 15, 2011
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Hey All,
    Is there anyone who can help me... I used this great code (with the external count.js) and now I need to implement this countdown in several places, therefor want to set another limit for the countdown (to cowntdown 8 days and 8 hours or 1 day and 6:55:00)
    Please advice :)
    Thanks!!
     
  9. sgirish11

    sgirish11 New Member

    Joined:
    Jun 6, 2011
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    HI

    I Need Pause and Resume functions also can you please provide me ?

    Thanks in advance
     
  10. mahendra0203

    mahendra0203 New Member

    Joined:
    Jul 31, 2011
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Hi,

    Good piece of code. I am writing a quiz page. I dont want the timer value to change if the user refreshes the page. Is this possible?. If yes could neone give me pointers on how to do it.

    Thanks in advance,
    Mahendra Naik
     
  11. RumeshChanchal

    RumeshChanchal New Member

    Joined:
    Sep 21, 2011
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    Hi Everyone,
    For creating a timer control we need to create a Date () object. Then we can retrieve all information such as hours, minutes, seconds and milliseconds......................

    Thanks!!!!!!
     
  12. RumeshChanchal

    RumeshChanchal New Member

    Joined:
    Sep 21, 2011
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    Hi,
    for more details on timer in javascript, you may check out the following link..
    mindstick.com/Articles/e98037b8-29cc-4419-9158-a6542e29f276/?Creating%20Simple%20Timer%20in%20Java%20Script

    Thanks!!!!!
     
  13. zulfiqarali.19

    zulfiqarali.19 New Member

    Joined:
    Sep 12, 2010
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice