Being ALONE in Tulsa (Oklahoma,USA) , make me so boring!. I have just completed my first month over here!! Hmm another one more month to stay here! It is really hard to stay away without my beautiful wife and charming two month old kid in Sri Lanka. So why i took this wise decision ? It is not easy when my kid turn 2 years or 3 years!, I have to be with him for his growth in that age.
Let see the fun part of it!, So i thought to create a simple html and Java Script based countdown page! yeah, I hear you! there are plenty of system/plugin available already in the market! So why the hell are you doing this? Answer "Read my first paragraph :P"
So lets get into the code and see what i have done with it!
If you see the code carefully, I have setup the "TargetDate" Date to be calculate! and used "Math" function to do the calculation! code is pretty simple to understand so go and grab it ;)
Output looks like bellow!
Let see the fun part of it!, So i thought to create a simple html and Java Script based countdown page! yeah, I hear you! there are plenty of system/plugin available already in the market! So why the hell are you doing this? Answer "Read my first paragraph :P"
So lets get into the code and see what i have done with it!
If you see the code carefully, I have setup the "TargetDate" Date to be calculate! and used "Math" function to do the calculation! code is pretty simple to understand so go and grab it ;)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<body> | |
<h1><script language="JavaScript"> | |
TargetDate = "12/02/2013 8:40 AM"; | |
BackColor = "palegreen"; | |
ForeColor = "navy"; | |
CountActive = true; | |
CountStepper = -1; | |
LeadingZero = true; | |
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; | |
FinishMessage = "It is finally here!"; | |
</script> | |
<script language="JavaScript"> function calcage(secs, num1, num2) { | |
s = ((Math.floor(secs/num1))%num2).toString(); | |
if (LeadingZero && s.length < 2) | |
s = "0" + s; | |
return "<b>" + s + "</b>"; | |
} | |
function CountBack(secs) { | |
if (secs < 0) { | |
document.getElementById("cntdwn").innerHTML = FinishMessage; | |
return; | |
} | |
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000)); | |
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24)); | |
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60)); | |
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60)); | |
document.getElementById("cntdwn").innerHTML = DisplayStr; | |
if (CountActive) | |
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod); | |
} | |
function putspan(backcolor, forecolor) { | |
document.write("<span id='cntdwn' style='background-color:" + backcolor + | |
"; color:" + forecolor + "'></span>"); | |
} | |
if (typeof(BackColor)=="undefined") | |
BackColor = "white"; | |
if (typeof(ForeColor)=="undefined") | |
ForeColor= "black"; | |
if (typeof(TargetDate)=="undefined") | |
TargetDate = "12/31/2020 5:00 AM"; | |
if (typeof(DisplayFormat)=="undefined") | |
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; | |
if (typeof(CountActive)=="undefined") | |
CountActive = true; | |
if (typeof(FinishMessage)=="undefined") | |
FinishMessage = ""; | |
if (typeof(CountStepper)!="number") | |
CountStepper = -1; | |
if (typeof(LeadingZero)=="undefined") | |
LeadingZero = true; | |
CountStepper = Math.ceil(CountStepper); | |
if (CountStepper == 0) | |
CountActive = false; | |
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990; | |
putspan(BackColor, ForeColor); | |
var dthen = new Date(TargetDate); | |
var dnow = new Date(); | |
if(CountStepper>0) | |
ddiff = new Date(dnow-dthen); | |
else | |
ddiff = new Date(dthen-dnow); | |
gsecs = Math.floor(ddiff.valueOf()/1000); | |
CountBack(gsecs);</script> | |
</h1> | |
</body> | |
</html> |
Output looks like bellow!