Universal Count Down Wall Example

Universal Count Down Wall

To show how easy it is to customize the output of the Universal Count Down Script to your heart's content, here's a fluid large local date counter wall. It taps into the oncountdown event handler of the script to populate the various fields as it counts down to Christmas in Los Angeles Time:

left Until Christmas in Los Angeles!

See also: Dynamic Count Down Wall

Source Code: Following is the full HTML for the counter.

Select All
<!doctype html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="localwallcounter.css" /> <script src="moment.min.js"></script> <script src="moment-timezone-with-data.min.js"></script> <script src="universalcountdown.js"> /*********************************************** * Universal Countdown script- By Dynamic Drive (http://www.dynamicdrive.com) * Please keep this notice intact * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ </script> </head> <body> <div id="christmasinLA" class="wallcounter"> <div class="wrapper"> <div class=" fields days"></div> <div class="fields hours"></div> <div class="fields minutes"></div> <div class="fields seconds"></div> </div> </div> <script> var localcountdown = document.getElementById('christmasinLA') var daysdiv = localcountdown.querySelector('.days') var hoursdiv = localcountdown.querySelector('.hours') var minutesdiv = localcountdown.querySelector('.minutes') var secondsdiv = localcountdown.querySelector('.seconds') function padandwrap(number){ // padandwrap function // 1) Pads single digit numbers with 0 // 2) Converts each number to string and wrapped in a DIV (ie: 19 becomes <div>1</div><div>9</div>) and returns it var output = '' var numstr = (number <=9)? '0' + number : String(number) for (var i=0; i<numstr.length; i++){ output += '<div>' + numstr.charAt(i) + '</div>\n' } return output } // See http://momentjs.com/docs/#/parsing/string/ for valid ISO date and time strings // See https://en.wikipedia.org/wiki/List_of_tz_database_time_zones for list of valid time zone strings var localcountdown = new countDownLocalTime("2016-12-25 00:00:00", "America/Los_Angeles") localcountdown.oncountdown = function(ms){ if (ms <= 0){ // if time's up alert("2016 Christmas in LA is Upon Us!") // do something } else{ var timeleft = countDownLocalTime.formatDuration(ms, "days") // format time using formatDuration(timeleftms, "baseunit") function if (timeleft.days != 'n/a'){ daysdiv.innerHTML = padandwrap( timeleft.days ) } if (timeleft.hours != 'n/a'){ hoursdiv.innerHTML = padandwrap( timeleft.hours ) } if (timeleft.minutes != 'n/a'){ minutesdiv.innerHTML = padandwrap( timeleft.minutes ) } secondsdiv.innerHTML = padandwrap( timeleft.seconds ) } } localcountdown.start() </script> <p style="text-align:center; font:bold 40px Arial">left until Christmas 2016 in Los Angeles!</p>

Download all of the referenced external files below:

localwallcounter.css new file from default set up
universalcountdown.js
moment.min.js
moment-timezone-with-data.min.js

The only new external file added to the default script is "localwallcounter.css".

Updating the Year Automatically

By default, the target local date and time to count down to is expressed as a ISO date string inside the following line:

var localcountdown = new countDownLocalTime("2016-12-25 00:00:00", "America/Los_Angeles")

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 ISO date string:

var today = new Date()
var christmasyear = today.getFullYear()
if (today.getMonth() == 11 && today.getDate() > 25){
	christmasyear += 1
}

var isodatestring = christmasyear + '-12-25 00:00:00'
var localcountdown = new countDownLocalTime(isodatestring, "America/Los_Angeles")

Now our count down will always point to current year's Christmas, and once past Dec 25th, next year's instead in Los Angeles.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post