JavaScript countdown solution
This is not going to be amazing, but I had to find / write a script like that for every hackday / barcamp I attended so far. Being lazy, I just wanted to create one I can re-use later on. So here you are:
You can either use the counter directly, or right-click and save it for local use. The look and feel is all in the CSS, yo u can set some of the preferences in the counter interface and there are several configuration settings you can change:
var cfg = {
displayID:'display', // element to show the seconds
startButtonID:'c', // start button ID
pauseButtonID:'p', // pause button ID
finalClass:'final', // class to add when final coutdown is reached
overClass:'over', // class to add when the time is over
initialText:{
value:'2:00',
label:'Initial Text'
},
seconds:{
value:2*60,
label:'Time in Seconds'
},
finalCountdown:{
value:30,
label:'Time when the warning starts'
},
pauseLabel:{
value:'pause',
label:'Pause Text'
},
resumeLabel:{
value:'resume',
label:'Resume Text'
}
};
Some configuration settings have values and labels, this is because of the preferences form being created from this object.
As said, nothing special, but I hope you can use it, I know I will.
Tags: countdown, counter, hackday, javascript
February 5th, 2008 at 7:20 pm
I was really expecting something else when I read the title of this blog post (a script for counting down to a date or time to put on your site or something). However, the script looks fun, but it would of course be easier to be able to edit the time via the page, instead of editing the source code.
February 5th, 2008 at 10:32 pm
@Arjan, you are right, I now added a preferences panel to change settings quickly. It is quite interesting as I was very annoyed by all the date countdown scripts I found, needing one of these :)
February 6th, 2008 at 9:36 am
Test it when you click “pause” , then “start” and “resume” again. Time will speed up :-)
February 6th, 2008 at 9:55 am
@lunatic sun: Interesting, when you turn the monitor off you cannot see it, I will have to fix that.
February 6th, 2008 at 10:43 am
I’ve used similar solutions (namely, the one Danil Glazman has put up) and found that sometimes a timeout of 1000 doesn’t equal 1 second, on busy computers for instance. (the timer for 45 minutes would last longer than that)
Idea: doing timeouts but displaying the actual time passed, by parsing the actual time at each timeout.
October 5th, 2008 at 6:59 pm
How do I make the timer pause when I leave the page?
October 30th, 2008 at 12:12 pm
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