
How do I create a JavaScript countdown timer on my Web page?Dave, being a new web developer I would like to know how I can code for a numeric value to decrease by 1 every 24 hours based on the local time function. Specifically, we are trying to create a reminder for our employees of an upcoming DoD audit in the facility. The count down will represent the number of days remaining before it's conducted. So what I need to do is begin with a date and start the countdown from there. What is the code that I should use? This is an obvious situation where JavaScript is going to be your friend, and it turns out that this is a straightforward application of JavaScript so it should be fairly easy. The key is to realize that JavaScript is a so-called object oriented programming language and that it has a specific date object with "methods" that let you set and extract specific values. But, really, this task is even easier than that, because all we need to do is set a specific target date in the future, get the current date, then calculate the amount of time between them and divide it out so that we end up with days as the value. You get the current date in JavaScript with new Date(), and it turns out that if you specify a date in the parens, it instantiates (creates) a new object with the specified date, rather than today. Want to have a date object with 28 February, 2005 as the specified date? Use new Date("28 February, 2005") and it'll work just fine. Then we want to work with what us Unix types call the "epoch time" which is the number of milliseconds since a fixed point in the past. For convenience, it's 1 Jan, 1970 on most systems, but if you think about it you'll realize that it doesn't matter what date the epoch time starts with, as long as it's consistent across both values. Anyway, let's see some code! <script language="javascript" type="text/javascript">
today = new Date();
todayEpoch = today.getTime();
target = new Date("28 February, 2005");
targetEpoch = target.getTime();
daysLeft = Math.floor(((targetEpoch - todayEpoch) / (60*60*24)) / 1000);
</script>
This JavaScript code snippet, which I'd put in the HEAD of my document, calculates the number of days left until the target date and saves it in the variable daysLeft. Notice that since we're actually working in milliseconds and we want days, we need to divide by 1000 to get seconds, then divide by 60 (to get minutes), 60 again (to get hours) and then 24 (to get days). Finally, we use the mathematical floor function to make sure we don't get weird values like 23.434233 days or similar, as a convenience. Whenever you want to actually include that value on the page, simply add a single line of JavaScript within the HTML code: <script>document.write(daysLeft);</script> To put it all together, here's a simple little page that has both JavaScript code pieces displayed: <html>
<head>
<title>JavaScript Countdown timer test</title>
<script language="javascript" type="text/javascript">
today = new Date();
todayEpoch = today.getTime();
target = new Date("28 February, 2005");
targetEpoch = target.getTime();
daysLeft = Math.floor(((targetEpoch - todayEpoch) / (60*60*24)) / 1000);
</script>
</head>
<body>
<h1>DoD inspection in
<script>document.write(daysLeft);</script>
days. Are you ready?
</h1>
</body>
I hope that'll help you create what you need on your site, and good luck with your DoD inspection too!
Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon
Categorized:
CGI Scripts and Web Site Programming
(Article 3874)
Tagged: Previous: What's an RSS Aggregator? Next: How do I flatten a directory structure in Unix? Subscribe!
Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader. I'd just like to point out, because this is javascript, its client side. So it will use whatever system time the user's computer is set at. Not saying your user's will have their local computer's system dates set so bad it will make a difference, but I just wanted to point out its totally on their side. If you have some sort of server side technology at your disposal, such as ASP, ASP.NET, JSP, etc, then you could better control it. Such as by setting seed value and then letting the client side javascript take the count down from there. Posted by: David Hergert at February 1, 2005 3:01 AMAbsolutely right, David. Since the person submitting the question was talking about a controlled work environment, I made the leap that they'd have standardized on a network time synchronization protocol and everyone would have the correct time on their computers, plus or minus a few seconds. If that's not true, then some people are definitely going to see odd results, but perhaps we can conclude that they receive less attention from IT and are therefore less critical to the success of the audit in the first place? (I know, this is pretty weak logic. Cut me some slack, okay? :-) ) Posted by: Dave Taylor at February 1, 2005 3:39 AMHi, I am enquiring about timing systems online. I am looking for a very accurate timing mechanism to incorporate into my website to evaluate correct Damien, pop over to Google and check out the results for "javascript millisecond timer". There are some interesting choices out there, and, yes, you can time down to the millisecond granularity. Posted by: Dave Taylor at October 20, 2005 2:35 AMhi thanks Posted by: dinesh at December 1, 2005 5:53 AMthanks alot for the reply Posted by: Jordan at May 18, 2006 11:53 AMIf you need one that works on myspace, check out this page Here Posted by: Brad at February 15, 2007 9:56 PMHi First of all I know nothing about html. I want to add the timer that you see if you go to the link below. I want to put that timer or create my own and put it on my Facebook profile. Is this possible and how? Thanks Posted by: Joe at September 10, 2007 7:20 PMhi I am looking to make a countdown clock for my webpage.... I don't have it published yet as I am not done with it... Posted by: Lonnie Owens at January 12, 2008 12:46 PMI want to send a mail automataically to a client afer 1 hour from my jsp page by using Javascript? Posted by: madhu at January 17, 2008 10:26 AMI am using your coutdown timer, however, instead of changing the date count each day at midnight it changes it at roughly noon. The only thing I changed in the code is the date we need it to count down to. Any advice on what I am doing wrong? Posted by: Charles at February 20, 2008 3:08 PMi have a website with a javatimer on it is there a javascript i can put in to stop it? and is there any way i can stop a timer that isnt javascript?
I created this PHP-Javascript Countdown Timer. The PHP is to fetch server time. You can set it to any timezone you want. And the Javascript is for the animation... This way it will end at the same time, no matter where geographically your website visitor is. Full instructions included. Enjoy... http://www.minisitegallery.com/blog/php-javascript-countdown-script-with-timezone-setting.html Posted by: Kidino at October 30, 2008 4:05 AMI have this Java script created and looking to improve it. I want to have the script start automatically once I open the html without having to click start. Also I want to have it clear the cache in Internet Explorer. Any Help or suggestions would be appreciated. = siteCount) // --> Start
i write the java script code for handling the time http://www.howtocreate.co.uk/tutorials/javascript/timers Posted by: bhaiyalal at November 10, 2008 10:10 PMI need a clck that will restart every week... it will count down to sunday @ 9:30 AM and on that time restart for next week can you help me with this? i would be greatful... hi thanks Posted by: karthikask at December 20, 2008 3:05 AMAfter constantly searching the web for a whole day this is by far the most straightforward and perfect solution to what I was looking for. Many thanks for the code Dave. It was very helpful but how do I change the color I am trying to build a timer much like this, that will allow me to do the following Set a number of days. have the timer count down to the last min up untill that last day once it hits that point it will restart and count down 7 days again, lets say for example i wanted it to end on Monday 9:00pm and on monday it stops for 1 hour then starts back counting from monday at 10:00pm untill 9:00pm is this posible to do? Posted by: Zak at March 20, 2009 8:02 PMThx, it helped a lot! Posted by: Rafke at May 4, 2009 7:18 PMHello from Calgary ... Thanks for the time-saving advice... Where's the tip-jar? Thanks for asking, Harry!! Here ya go: http://www.askdavetaylor.com/buy-dave-a-cuppa.html :-) Posted by: Dave Taylor at May 25, 2009 6:47 AMDave, Multiple Countdown Clocks
StartCountDown("clock1","06/27/2010 12:33 PM -0400") i appriciate that timer .. Posted by: junaid at August 9, 2009 12:02 PMhello sir, I am writing an examination program in ASP.NET that will time student for 30 min after the time elapse the page will move to the next exam page. please how can i achieve this, for my project. thanks very much Posted by: Abraham at August 18, 2009 3:57 PMI have a lot to say, but ...
I do have a comment, now that you mention it!
|
![]()
Search
Find just the answers you seek from among our 2300+ free tech support articles by using our Lijit search engine.
Help!
Subscribe to
Ask Dave Taylor!
Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.
Articles and Reviews
Auctions and Online Shopping Blogs and RSS Feeds Building Web site traffic Business and Management Cell Phones and Mobile Phones CGI Scripts and Web Site Programming Computer and Internet Basics d) None of the Above HTML and CSS Industry News and Trade Shows Mac OS X Help MySpace, Facebook, Twitter and Social Network Help Pay Per Click (PPC) Search Engine Optimization Shell Script Programming Sony PSP, MP3 Players, Etc. The Writing Business Unix and Linux Help Video Game Tips and Help Windows Help
Recent Entries
Book Links
|