countdown
|
Countdown timer (above) set to New Years Day.
|
Countdown is a highly flexible javascript flip clock.
Set it up to use external images (as shown above), or use without images as seen in the examples below.
To use countdown, include the following lines of code into your page:
The following goes into your page's <head>
<script src="countdown.js"></script>
The following can go anywhere in the <body>
<script>
var myCountdown1 = new Countdown({time:316});
</script>
// Usage:
// -------------------------------------------------
// Count down to a date
// -------------------------------------------------
var test1 = new Countdown({
year : 2013,
month : 1,
day : 1,
hour : 0,
ampm : "am",
minute : 0,
second : 0 // < - no comma on last item!!
});
// -------------------------------------------------
// Count down number of seconds
// -------------------------------------------------
var test2 = new Countdown( { style: "flip", time: 3600 } );
// -------------------------------------------------
// Advanced Options
// -------------------------------------------------
function countdownComplete(){
alert("yo");
}
var myCD2 = new Countdown({
// Using "number of seconds"
time : 15, // Total number of seconds to count down.
//
// --- OR ---
//
// Using a "dead line" date (NOTE: If "time" set this deadline date will NOT be used ("time" over-rides date))
year : 2013, // The target date's year (optional)
month : 1, // The target date's month (optional)
day : 1, // The target date's day (optional)
hour : 0, // The target date's hour (optional)
ampm : "am", // Is the hour refering to AM (early/day) or PM (late/night)?
minute : 0, // The target date's minutes (optional)
second : 0, // The target date's seconds (optional)
// ---------------------------------
// Optional settings
// ---------------------------------
width : 200, // Defaults to 200 x 30 pixels, you can specify a custom size here
height : 30, //
inline : true, // If inline, text will wrap around object, otherwise this countdown object will consume the entire "line"
target : "foo", // A reference to an html DIV id (e.g. DIV id="foo")
style : "boring", // flip boring whatever (only "flip" uses image/animation)
rangeHi : "year", // The highest unit of time to display
rangeLo : "second", // The lowest unit of time to display
padding : 0.4, // Padding between the digits and the background box. Value reflects a percentage of overall height.
onComplete : countdownComplete, // Specify a function to call when done
numberMarginTop : 5.5,
numbers : {
font : "Arial",
color : "#FFFFFF",
bkgd : "#365D8B",
rounded : 0.15, // percentage of size
shadow : {
x : 0, // x offset (in pixels)
y : 3, // y offset (in pixels)
s : 4, // spread
c : "#000000", // color
a : 0.4 // alpha // <- no comma on last item!
}
} // <- no comma on last item!
labels : {
font : "Arial",
color : "#000000",
weight : "normal" // < - no comma on last item!
}
});