Count Down Wall
To show how easy it is to customize the output of the
Dynamic Count Down Script to your heart's
content, here's a fluid large date counter wall. It taps into the
oncountdown
event handler of the script to populate the various
fields as it counts down to Christmas:
left until Christmas !
See also: Universal Count Down Wall
Source Code: Following is the full HTML for the counter.
Download all of the referenced external files below:
- wallcounter.css new file from default set up
- countdown.js
The only new external file added to the default script is "wallcounter.css".
Updating the Year Automatically
By default, the target local date and time to count down to is expressed as a JavaScript date string inside the following line:
var christmas = new cdtime("2016-12-25 00:00:00")
If you're counting down to reoccurring events that happen annually on the same day and time, instead of manually updating the year yourself each year to point to the next upcoming event, we can do this dynamically.
Take Christmas for example. The following extra code constructs a year variable that's incremented by 1 from the current year once Christmas (Dec 25th) has passed. This variable is then used as the year portion of the final JavaScript date string:
var today = new Date() var christmasyear = today.getFullYear() if (today.getMonth() == 11 && today.getDate() > 25){ christmasyear += 1 } var christmas = new cdtime(christmasyear + "-12-25 00:00:00")
Now our count down will always point to current year's Christmas, and once past Dec 25th, next year's instead.