Page 1 of 3 123 Last
  • Jump to page:
    #1
  1. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,126
    Rep Power
    2921

    Post Javascript Countdown Timer


    Below is the code needed to display count down in HTML page
    using javascript.

    You define container for the count down (either <span> or
    <div> tag) and the initial value, and the code updates the
    time automaticlly in the format HH:MM:SS

    You can also control the style of the container using standard
    CSS, as demonstrated in the below and attached code.

    To activate the count down in one of your existing pages you
    have to follow two steps:
    1. include the attached CountDown.js file with:
    Code:
    <script type="text/javascript" src="CountDown.js"></script>
    2. have such javascript in the <head> section:
    Code:
    <script type="text/javascript">
    window.onload=WindowLoad;
    function WindowLoad(event) {
    	ActivateCountDown("CountDownPanel", 100);
    }
    </script>
    where "CountDownPanel" is the ID of the container
    (i.e. you should have <span> or <div> with this ID) and
    100 is the time in seconds to be counted.

    full source code:
    javascript Code:
    --CountDown.js
    var _countDowncontainer=0;
    var _currentSeconds=0;
     
    function ActivateCountDown(strContainerID, initialValue) {
    	_countDowncontainer = document.getElementById(strContainerID);
     
    	if (!_countDowncontainer) {
    		alert("count down error: container does not exist: "+strContainerID+
    			"\nmake sure html element with this ID exists");
    		return;
    	}
     
    	SetCountdownText(initialValue);
    	window.setTimeout("CountDownTick()", 1000);
    }
     
    function CountDownTick() {
    	if (_currentSeconds <= 0) {
    		alert("your time has expired!");
    		return;
    	}
     
    	SetCountdownText(_currentSeconds-1);
    	window.setTimeout("CountDownTick()", 1000);
    }
     
    function SetCountdownText(seconds) {
    	//store:
    	_currentSeconds = seconds;
     
    	//get minutes:
    	var minutes=parseInt(seconds/60);
     
    	//shrink:
    	seconds = (seconds%60);
     
    	//get hours:
    	var hours=parseInt(minutes/60);
     
    	//shrink:
    	minutes = (minutes%60);
     
    	//build text:
    	var strText = AddZero(hours) + ":" + AddZero(minutes) + ":" + AddZero(seconds);
     
    	//apply:
    	_countDowncontainer.innerHTML = strText;
    }
     
    function AddZero(num) {
    	return ((num >= 0)&&(num < 10))?"0"+num:num+"";
    }

    html4strict Code:
     
    --Timer.html (sample html page with the timer)
    <html>
    <head>
    <title>Timer Test</title>
    <script type="text/javascript" src="CountDown.js"></script>
    <script type="text/javascript">
    window.onload=WindowLoad;
    function WindowLoad(event) {
    	ActivateCountDown("CountDownPanel", 100);
    }
    </script>
    <style type="text/css">
    #CountDownPanel {color: blue; background-color: yellow; font-size: 18px;}
    </style>
    </head>
    <body>
    Hello!<br />
    Time remaining: <span id="CountDownPanel"></span>
    </body>
    </html>


    edit:
    I've added AdvancedCountDown.zip file with advanced options:
    1. supporting more than one container (no limit)
    2. supporting stopping and continuing each count down
    3. real time flow: alerts no longer pause the count down.



    edit:
    Added extra functionality in the advanced options:
    1. supporting callbacks: once the timer has ended, callback
      function is called. this means you no longer have to change
      anything in the JavaScript file itself.
    2. supporting date formats. you can add the date_format
      attribute to the container with any format you like.
      supported keys:
      • %d - Days
      • %h - Hours
      • %m - Minutes
      • %s - Seconds

      default format is %h:%m:%s
    3. supporting changing the time at runtime. see the .html
      file for example of using it.


    edit:
    Added extra functionality in the advanced options:
    1. supporting "RAW" time_format flag, when raised the timer
      will show the raw value instead of the formatted time.
    2. supporting "second_value" attribute: when set, given value
      will be subtracted from the value in every second. (instead of 1)
    3. supporting "finish_value" attribute: when set, current value
      will be compared against it instead of against zero.

    see the second Timer in the .html file for example of all above.

    edit:
    AdvancedCountDown is now supporting getting future date
    as the initial value. To prevent date format conflicts, the
    date must be given as array with six items:
    day, month, year, hour, minute, second
    for example:
    Code:
    ActivateCountDown("CountDownPanel", [22, 6, 2011, 22, 30, 30], "CountDownEnded")
    this will count seconds left until 22 in June, 2011 at 22:30 and 30 seconds. Note that 24-hours format must be used.

    Happy Programming!

    To keep this thread clean I have moved several discussions to
    separate threads, here they are:
    Code not working because onload was overwritten
    Redirecting to different page when the time is over
    Preserving the time over different pages
    Problem when clicking browser back button
    Count again when time is over (loop)
    Submitting a form when the time is over
    Redirecting with frames when time is over
    Problems after changing alert code
    Changing font color when time is over
    Counting a floating point number instead of seconds
    General help implementing the counter with your existing code
    Integrating the timer with C# code
    Showing same time to all users

    Comments on this post

    • RadioactiveFrog agrees : cool :thumbs:
    • mercattor agrees : Excelent post! Very useful =)
    Attached Files
    Last edited by Shadow Wizard; June 24th, 2010 at 06:49 AM. Reason: added related threads and support in future dates
  2. #2
  3. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Nov 2007
    Location
    Vancouver, BC, Canada
    Posts
    2
    Rep Power
    0

    Angry Need some guidance


    Hello,

    I have been searching for something similar to what you have - I even went to experts-exchange and all I have been told is to use AJAX for what I am trying to do - not much help - I am hoping you can help me out!

    -----------------------
    I have built a page to display certain number of records (eg 1000)

    I would like to know how to do automatic timed pagination of those records - for example, show the first 10, then after a few seconds, display the next...and so forth. The data is coming from DB which automatically refreshes after 60 sec - when this happens, the page needs to stay on the current selection and refresh its content - for example if displaying records 30-40, refresh and don't go back to the start.

    Can you please help me with finding a solution.

    I am using ASP classic with Oracle 9i
  4. #3
  5. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,126
    Rep Power
    2921
    you ask two different questions.
    you can have code that automatically "replace" pages by simple client side
    redirection with the next page in the query string.
    you can have code the "remember" the current page in Session, and at each
    page reload it will bring the next page.
    what you prefer?
  6. #4
  7. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Nov 2007
    Location
    Vancouver, BC, Canada
    Posts
    2
    Rep Power
    0
    Originally Posted by Shadow Wizard
    you ask two different questions.
    you can have code that automatically "replace" pages by simple client side
    redirection with the next page in the query string.
    you can have code the "remember" the current page in Session, and at each
    page reload it will bring the next page.
    what you prefer?
    This is for flight information - basically just need to display the first 10 records...wait a few seconds (10) and then bring up the next 10 records...and so on...

    It is basically pagination but automatic - i can set the data to refresh every 1 or X minutes (or seconds)

    So if you are at the airport, you are looking at the flight info screen, the information flips.

    I have the url but cannot seem to put it here.
  8. #5
  9. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Jun 2008
    Posts
    1
    Rep Power
    0
    newbie to java here

    i got days added in and found it simple enough

    however i'm lost with adding centiseconds. i'm assuming of course that i would need to make centiseconds the new standard time in the code instead of seconds.

    i read somewhere that java keeps track of time in milliseconds naturally. if this is true, would it be as easy as just simply revealing it in a specified place (for example; after seconds, obviously)
    Code:
    function SetCountdownText(seconds) {
    	//store:
    	_currentSeconds = seconds;
    	
    	//get minutes:
    	var minutes=parseInt(seconds/60);
    	
    	//shrink:
    	seconds = (seconds%60);
    	
    	//get hours:
    	var hours=parseInt(minutes/60);
    	
    	//shrink:
    	minutes = (minutes%60);
    	
    	//get days:
    	var days=parseInt(hours/24);
    	
    	//shrink:
    	hours = (hours%24);
    	
    	//build text:
    	var strText = AddZero(days) + ":" + AddZero(hours) + ":" + AddZero(minutes) + ":" + AddZero(seconds);

    EDIT: i figured out a way. i changed
    window.setTimeout("CountDownTick()", 1000);
    to
    window.setTimeout("CountDownTick()", 1);

    in both instances. then changed seconds, minutes, days, accordingly. seconds are now centiseconds, minutes are now seconds, and so on. putting in the time now is 3600 for 1 minute which kinda blows. if anyone knows of a more "correct" way of doing this, i would still appreciate it.

    Comments on this post

    • Shadow Wizard agrees : cheers and thanks for sharing your solution! :)
  10. #6
  11. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2008
    Posts
    3
    Rep Power
    0
    Hey,

    Just wanted to say a massive thanks - this code is exactly what I've been looking for.

    I'm ok with ASP - just not best with java ... one thing I really need help with is for multiple use of this timer on the page.

    I made an attempt, but it just screws the countdowns and only worked for the very last container.

    ie:

    Time until A = 00:02:15
    Time Until B = 01:15:20
    Time Until C = 00:15:12

    Is this possible? Thanks in advance!
  12. #7
  13. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,126
    Rep Power
    2921
    Originally Posted by Morbid
    Hey,

    Just wanted to say a massive thanks - this code is exactly what I've been looking for.

    I'm ok with ASP - just not best with java ... one thing I really need help with is for multiple use of this timer on the page.

    I made an attempt, but it just screws the countdowns and only worked for the very last container.

    ie:

    Time until A = 00:02:15
    Time Until B = 01:15:20
    Time Until C = 00:15:12

    Is this possible? Thanks in advance!
    no problem!
    sure this is possible.. it posed some challenge to me but as I love
    challenges, it was fun to do that. see the first post in this thread,
    I've added zip file with what you need plus full source code.
    thanks for the idea, let me know if you face any problems.
  14. #8
  15. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2008
    Posts
    1
    Rep Power
    0

    i want to add the days features into this clock counter


    hi all,
    i want to add days features to this clock counter.
    how will it be done.
    plz tell me,
    thanks,
  16. #9
  17. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,126
    Rep Power
    2921
    Originally Posted by ashu2409
    hi all,
    i want to add days features to this clock counter.
    how will it be done.
    plz tell me,
    thanks,
    I have added what you need in the AdvancedCountDown files.
    download the zip and you'll see the .html file with date format.
    let me know if you have any questions or problem.
  18. #10
  19. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2008
    Posts
    3
    Rep Power
    0
    Originally Posted by Shadow Wizard
    I have added what you need in the AdvancedCountDown files.
    download the zip and you'll see the .html file with date format.
    let me know if you have any questions or problem.
    Thanks so much! Its working perfectly - your a legend

    One thing, I'm sure I can find a script that does this easily enough already, but curious how much work it would be to add into your existing js code.

    I also wanted to display the current server time in realtime... you know just a clock on the page that actually ticks away.

    Is this a major task or easily added into the code? Again you help is much appreciated!
  20. #11
  21. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Nov 2009
    Posts
    2
    Rep Power
    0
    Hello, i want to use ur code in my project
    the problem is that the javascript cant find the control,
    i checked page source the ID is fine and exists.

    am using a content page btw
    thanks in advance
  22. #12
  23. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,126
    Rep Power
    2921
    Originally Posted by karim.soufi
    Hello, i want to use ur code in my project
    the problem is that the javascript cant find the control,
    i checked page source the ID is fine and exists.

    am using a content page btw
    thanks in advance
    hi, sorry for the late reply.

    if still relevant, please post link to your page so I can see for myself,
    or alternatively post your whole code.

    what do you mean by "content page"?
  24. #13
  25. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Nov 2009
    Posts
    2
    Rep Power
    0
    Originally Posted by Shadow Wizard
    hi, sorry for the late reply.

    if still relevant, please post link to your page so I can see for myself,
    or alternatively post your whole code.

    what do you mean by "content page"?
    i got it working, thank u
  26. #14
  27. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    May 2010
    Posts
    2
    Rep Power
    0

    Question Changing countdown time with a dropdown.


    Thanks for the great countdown code! I am a definate novice so sorry for any dumb questions. I am having trouble getting the timer to change with a dropdown box. I am using the advanced count down code. I have tried many things but can't get it.

    Here is what I have:
    Code:
    <html>
    <head>
    <title>Exam Recheck Timer</title>
    <script type="text/javascript" src="AdvancedCountDown.js"></script>
    <script type="text/javascript">
    window.onload=WindowLoad;
    function WindowLoad(event) {
    	ActivateCountDown("CountDownPanel1", 3599, "CountDownEnded1");
    }
    
    function CountDownEnded1()
    {
    	document.location="Exam Recheck Alarm.html"
    }
    
    </script>
    <style type="text/css">
    .CountDownPanel {color: red; background-color: black; font-size: 80px;}
    </style>
    </head>
    <body bgcolor="black">
    <p align="center">
    	<span class="CountDownPanel" id="CountDownPanel1"></span>
    </p>
    <p align="center">
    <select onChange="SetInitialTime(CountDownPanel1, this.value)">
    	<option value="OFF" selected>OFF</option>
    	<option value="4">5 Seconds (Test)</option>
    	<option value="299">5 Minutes</option>
    	<option value="599">10 Minutes</option>
    	<option value="899">15 Minutes</option>
    	<option value="1199">20 Minutes</option>
    	<option value="1499">25 Minutes</option>
    	<option value="1799">30 Minutes</option>
    	<option value="2099">35 Minutes</option>
    	<option value="2399">40 Minutes</option>
    	<option value="2699">45 Minutes</option>
    	<option value="2999">50 Minutes</option>
    	<option value="3299">55 Minutes</option>
    	<option value="3599">60 Minutes</option>
    </select>
    </p>
    </body>
    </html>
    Your help is greatly appreciated.
    Thanks.
  28. #15
  29. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    May 2010
    Posts
    2
    Rep Power
    0

    Thumbs up Got it.


    I finally got it.

    Code:
    <html>
    <head>
    <title>Exam Recheck Timer</title>
    <script type="text/javascript" src="AdvancedCountDown.js"></script>
    <script type="text/javascript">
    window.onload=WindowLoad;
    function WindowLoad(event) {
    	ActivateCountDown("CountDownPanel1", 3599, "CountDownEnded1");
    }
    
    function CountDownEnded1()
    {
    	document.location="Exam Recheck Alarm.html"
    }
    
    function ChangeTimer()
    {
    	var val_add=document.minutesForm.minutesValue.options[document.minutesForm.minutesValue.selectedIndex].value;
    	SetInitialTime("CountDownPanel1", val_add);
    }
    </script>
    <style type="text/css">
    .CountDownPanel {color: red; background-color: black; font-size: 80px;}
    </style>
    </head>
    
    <body bgcolor="black">
    <p align="center">
    	<span class="CountDownPanel" id="CountDownPanel1"></span>
    </p>
    <p align="center">
    <form name=minutesForm>
    <select name=minutesValue onChange="ChangeTimer()">
    	<option value="OFF" selected>OFF</option>
    	<option value="4">5 Seconds (Test)</option>
    	<option value="299">5 Minutes</option>
    	<option value="599">10 Minutes</option>
    	<option value="899">15 Minutes</option>
    	<option value="1199">20 Minutes</option>
    	<option value="1499">25 Minutes</option>
    	<option value="1799">30 Minutes</option>
    	<option value="2099">35 Minutes</option>
    	<option value="2399">40 Minutes</option>
    	<option value="2699">45 Minutes</option>
    	<option value="2999">50 Minutes</option>
    	<option value="3299">55 Minutes</option>
    	<option value="3599">60 Minutes</option>
    </select>
    </form>
    </p>
    </body>
    </html>
Page 1 of 3 123 Last
  • Jump to page:

Similar Threads

  1. ASP countdown timer
    By ben.r in forum ASP Development
    Replies: 4
    Last Post: August 8th, 2005, 08:55 AM
  2. Small Javascript Timer Problem
    By Scooty in forum ASP Development
    Replies: 0
    Last Post: June 13th, 2005, 12:43 PM
  3. Replies: 4
    Last Post: January 27th, 2005, 09:54 PM
  4. help, make timer! ASP & Javascript
    By rwahdan in forum ASP Development
    Replies: 1
    Last Post: September 19th, 2004, 07:49 AM
  5. Javascript Timer
    By Matt71 in forum HTML, JavaScript And CSS Help
    Replies: 2
    Last Post: May 21st, 2004, 03:58 AM

IMN logo majestic logo threadwatch logo seochat tools logo