First, I think this might be what you are looking for and second I wrote this mostly in jQuery (I like working in jQuery better), meaning you will need the jQuery library.
I also used AJAX, JSON and PHP, for I like working with PHP date functions better than JavaScript.
Here’s the php file called: sendCountDown.php
[php]<?php
date_default_timezone_set(‘America/Detroit’); // Set the Default Time Zone:
// $expired would be from a Table in a database in reality:
$expired = new DateTime(‘2014-07-04 12:00:00’);
$now = new DateTime();
$e[‘countDown’] = $now->diff($expired, true);
print json_encode($e); // JSON[/php]
As you can tell it is really simple and now here’s the HTML file:
[code]
Expired Countdown
.centerClock {
/* Rest of Styling in jQuery */
margin: 0 auto;
}
[/code]
Again very simple and lastly here’s the jQuery file:
[php]$(function() {
/* The Timer to call the Ajax Method */
var updateTime = setInterval(displayTime, 1000);
/* The Ajax Method of Getting Time */
function displayTime() {
var $clock = $('.clock');
$.ajax({ // Start of ajax:
url: 'sendCountDown.php', // Pulling time from the server:
dataType: "json", // Format type:
success: function(info) { // Grab the data from php and then display it:
// Variables * Self-Explanatory *
var days = info.countDown.days, // Grab total days till expiration:
hours = info.countDown.h, // Grab total hours till expiration:
minutes = info.countDown.i, // Grab total mins till expiration:
seconds = info.countDown.s, // Grab total secs till expiration:
$msg = 'Days: ' + days + ' Hours: ' + hours +
' Minutes: ' + minutes + ' Seconds ' + seconds;
/* Display Time in Message */
$clock.text($msg);
},
error: function(request, status, error) {
alert(status + ", " + error);
}
}); // End of ajax call:
} // End of Function:
/* I Just wanted to see if I could stle it in jQuery */
/* START SECTION */
$('.clockBox').css({
'box-sizing' : 'border-box',
'display' : 'block',
width : '100%',
'max-width' : '500px',
height : '100%',
'max-height' : '50px',
'text-align' : 'center',
padding : '0 20px',
'background-color' : 'rgba(102, 0, 0, 0.8)'
//margin : '0 auto' // DELETE THIS IF TO CONTROL IT FROM CSS:
});
$('.clock').css({
'font-family' : 'Arial, Helvetica, sans-serif',
'font-size' : '1.2rem',
'line-height' : '50px',
color : '#fff',
'letter-spacing' : '0.0850em'
});
$('.rounded').css({
'-webkit-border-radius' : 15,
'-mox-border-radius' : 15,
'-ms-border-radius' : 15,
'-o-border-radius' : 15,
'border-radius' : 15
});
$('.shadow').css({
'-webkit-box-shadow' : '2px 2px 3px rgba(0, 0, 0, 0.8)',
'-moz-box-shadow' : '2px 2px 3px rgba(0, 0, 0, 0.8)',
'box-shadow' : '2px 2px 3px rgba(0, 0, 0, 0.8)'
});
/* END SECTION */
/* DELETE BETWEEN START & END */
/* THEN STYLE IT IN CSS IF DESIRED */
}); // END OF DOC READY:[/php]
Like I said I don’t know if this is what you are looking for, but the date(s) are pretty straight forward and can be formatted anyway you like. Hope this helps. 
P.S. Setting up the expiration portion should be relatively simple, a separate function to check to see if the Date has expired would probably do the trick.
