Countdown Example

by Chase Wilson

HTML

<script src="http://agroism.s3.amazonaws.com/Demos/blocks/almond.js"></script>
<script src="http://agroism.s3.amazonaws.com/Demos/countdown/countdown.js"></script>
<div class="tick-counter">
    <label>Tick Counter:</label>
    <div id="tick-counter">0</div>
</div>

CSS

.countdown-wrapper .countdown-inner:before,
.cf:before,
.countdown-wrapper .countdown-inner:after,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.countdown-wrapper .countdown-inner:after,
.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.countdown-wrapper .countdown-inner,
.cf {
    *zoom: 1;
}

.countdown-wrapper {
	width: 355px !important;
}

.tick-counter {
	background: #eee;
    padding: 3px;
    position: absolute;
    top: 10px;
    left: 10px;
}

JavaScript

var CountdownModule = new require('countdown')
var tickCount = 0
var tickCounterDiv = document.getElementById('tick-counter')
 
//  This will create the standard countdown module
//  using the default theme.  The default here is
//  the timebomb theme

var countdown = new CountdownModule({
    date: "12/25/2013"
}).inject(document.body)
 
//  This is a seperate piece of code that needs to 
//  respond to the state of our countdown ticker.
//  For demo purposes we're showing how many times the
//  ticker has tocked since we landed on the page
countdown.addEvent('time:changed', function (key,time) {
	tickCount++
    tickCounterDiv.innerHTML = tickCount
})

//  This is a custom counter using a custom 
//  markup template.  You would use something 
//  like this if your project didn't require 
//  looking as though it was "counting down".
//  For instance some animation, like a car
//  driving on a race track towards the finishline.
new CountdownModule({
     date: "12/25/2013"
    ,template: '<b bind="days"><%=this.getDelta("days") %></b>::<b bind="hours"><%=this.getDelta("hours") %></b>::<b bind="minutes"><%=this.getDelta("minutes") %></b>::<b bind="seconds"><%=this.getDelta("seconds") %></b>'
}).inject(document.body)