JavaScript Christmas Countdown digital clock
Around the world, the holiday of Christmas is celebrated with carolers, decorations, Santa Claus and ceremony as a way to honor the birth of Jesus Christ on December 25th every year.In this article we are going to design a JavaScript Christmas Countdown digital clock using the time of the visitor's computer for counting down to Christmas events. This script is extremely flexible it will work as per time zone. Before we start take a look to fine out days left until this Christmas.
We are going to use a div tag <div id="nxtXmas"> Christmas Countdown </div> as content place holder to modify its value dynamically to show JavaScript Christmas Countdown digital clock. Following piece of CSS code will take care of representation of Christmas Countdown digital clock.
<style type="text/css" media="all">
#nxtXmas {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: bold;
color: #164BA0;
background-color: #D1D1D1;
border: 1px solid #83AAD3;
width: 400px;
text-align:center;
}
#nxtXmas span{
font-size: 80%
}
</style>
Scripting JavaScript Christmas Countdown digital clock
We have to design JavaScript function which will generate Christmas Countdown digital clock for us. The basic idea behind the script is to calculate time difference in second, between two dates and convert it to desire format. Then disply it to browser window with the help of Window object supports methods setTimeout() to call same function after every 1000 milliseconds. Take a look at following piece of code. It will generate a JavaScript Christmas Countdown digital clock for you.
<script type="text/javascript" language="javascript">
<!--
function iCounter() {
var nxtXmas=(new Date().getMonth()>=11 && new Date().getDate()>25)? (new Date().getFullYear())+1 : new Date().getFullYear();
var cDateTime=new Date();
var tDateTime=new Date("December 25, "+nxtXmas+" 0:0:00");
//var tDateTime=new Date("June 11, "+nxtXmas+" 0:0:00");
var timeDiff=(tDateTime-cDateTime)/1000; //difference btw target date and current date, in seconds
var oneMin=60; //1 minute in seconds
var oneHour=60*60; //1 hour in seconds
var oneDay=60*60*24; //1 day in seconds
var totalDay=Math.floor(timeDiff/oneDay);
var totalHour=Math.floor((timeDiff-totalDay*oneDay)/oneHour);
var totalMin=Math.floor((timeDiff-totalDay*oneDay-totalHour*oneHour)/oneMin);
var totalSec=Math.floor((timeDiff-totalDay*oneDay-totalHour*oneHour-totalMin*oneMin));
//Disply Christmas Countdown to Web Browser
document.getElementById("nxtXmas").innerHTML = totalDay + ' <span>Days,</span> ' + totalHour +' <span>Hours,</span> '+ totalMin +' <span>Minute,</span> '+ totalSec +' <span>Seconds,</span><br /> Remain till the Christmas';
setTimeout("iCounter()",1000);
}
iCounter();
-->
</script>
How the JavaScript Christmas Countdown digital clock Script Work
We have designed a function iCounter() in which we get the current year. If the Christmas has passed then next year date is consider and stored in Javascript variable tDateTime. Javascript conditional operator help us to do so. The Javascript conditional operator syntax looks like this: (Condition) ? val1: val2. If condition is true then it will return val1 otherwise val2. Another Javascript variable cDateTime is used to store current date with respect to the visitor's time zone.
The difference between two dates is stored in Javascript variable timeDiff in second form. Then total days, hours, minutes and seconds get calculated and represented to web browser with document.getElementById("nxtXmas").innerHTML = totalDay + ' <span>Days,</span> ' + totalHour +' <span>Hours,</span> '+ totalMin +' <span>Minute,</span> '+ totalSec +' <span>Seconds,</span><br /> Remain till the Christmas';
Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. First, you must give the element you wish to change innerHTML property. you will be able to so this with the getElementById() method. getElementById() method Returns a reference to an element node from the document tree whose id attribute value matches the parameter value. If there is no match, the method returns null.
Source Code:
DownloadAlso See:
TrackBack URI for this entry
Subscribe to this comment's feed
