Earlier, we've shared with you how to add Snowflakes to your Blog/Website. Then we shared several Christmas Decorations with you. Now, it's time for a Countdown Timer for your Blog/Website! This Countdown Timer was originally made for Christmas, but we've customized it to make it usable for any purpose. Now you can use it for any event, such as New Year, Christmas, or anything you wish to. The Countdown Timer can only be set into the current year, not the rest. For example, it can be set to anything starting from January 1 to December 31st of an year. Do not set the timer for the next year, such as 2014-15 if you use it in 2013.
Key-features:
- Full customization
- No Ads or any external links
- Easy To Install
- No images
Installation
Blogspot Users:
Login to blogger, Go to Layout > Add Widget > HTML/JavaScript , copy the code given below and paste it, then click "Save".
Website Users:
Copy code from "<style style="text/css">" to "return displaystring } </script>" and place in "Head:" section after that copy code from "<div id="countdowncontainer"></div> to formatresults2) </script>" and place into the BDOY section of your page where you wish the countdown to be shown.
<style style="text/css">Customization
.lcdstyle{ /*Example CSS to create LCD countdown look*/
background:#000000;
color:#FFFFFF;font: bold 20px arial;
padding: 15px;
border:4px solid #E0E0E0;border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 5px #CCCCCC;
}
.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 120%
}
</style>
<script type="text/javascript">
function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}
cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}
cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}
cdtime.prototype.showresults=function(){
var thisobj=this
var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}
/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////
//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left
//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc
function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until November 29, 2022 18:25:00"
}
else{ //else if target date/time met
var displaystring=""
}
return displaystring
}
function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> "
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Time Up!") //Instead, perform a custom alert
}
return displaystring
}
</script>
<h1 style="color:#660000; margin:0;">Countdown</h1>
<div id="countdowncontainer"></div>
<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2"></div>
<script type="text/javascript">
var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)
var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=7&& new Date().getDate()>31)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", " November 25, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)
</script>
Change the highlighted color code to the one you wish to. You can pick the color code of your choice from our Color Generators 'here'.
Change background: 000000
Change Font color: FFFFFF;
Change border color :E0E0E0;
Change box shadow color :CCCCCC
Change date: November 25
Change the message: Time Up!
Change Title Color:660000
Change Title: Countdown
Change border rounds : 15px
Change border rounds : 15px
To remove Title, remove this line from the code
"<h1 style="color:#660000; margin:0;">Countdown</h1>"
Feel free to ask any questions, give feedback and if you like this article, like and share it with your friends!
Muhammad Junaid
Muhammad Junaid is the writer of Entertainment Ghost. He writes articles, reviews, previews and entertainment news about gaming, technology, the media and so on. You can follow him on Twitter @Mr_MJunaid and Facebook MJunaid
