Posted by & filed under General, Tutorials.


Full screen new year, Full screen Christmas

I have been experimenting with Javascript – a programming language that is executed in the user’s browser, rather than on the server as with PHP. This enables codes to be run with in the page, without having to reload a new page, and respond quickly to the user’s input (e.g. mouse and keyboard movement). I created a Christmas countdown and a New Year countdown, which automatically update themselves for the next year.
Here is the Javascript to make a countdown clock for Christmas


//change the text below to reflect your own,
var before="New Year!";
var current="Happy New Year!";
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

function countdown(yr,m,d){
theyear=yr;
themonth=m;
theday=d;
var today=new Date();

var todayyear=today.getYear();
if (todayyear < 1000)
	{
	todayyear+=1900;
	}
	
var todaym=today.getUTCMonth(); //increase accuracy by using Universal (UTC) time
var todayd=today.getUTCDate();
var todayh=today.getUTCHours();
var todaymin=today.getUTCMinutes();
var todaysec=today.getUTCSeconds();
var todaystring=montharray[todaym]+" "+todayd+", "+todayyear+" "+todayh+":"+todaymin+":"+todaysec;
futurestring=montharray[m-1]+" "+d+", "+yr;
dd=Date.parse(futurestring)-Date.parse(todaystring);
dday=Math.floor(dd/(60*60*1000*24)*1); //put times into the correct format
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

if(todayd==1&&todaym==0){
document.getElementById("time").innerHTML=current;
return;
}

else {
//use this comment line if you don't want the results in separate div tags
//document.getElementById("time").innerHTML=dday+"d " + dhour+"h "+ " " + dmin + "m " + dsec + "s ";
document.getElementById("days").innerHTML=dday+"d ";
document.getElementById("hours").innerHTML=dhour+"h ";
document.getElementById("minutes").innerHTML=dmin + "m ";
document.getElementById("seconds").innerHTML=dsec + "s ";

setTimeout("countdown(theyear,themonth,theday)",1000);
}

}
//enter the count down date using the format year/month/day
var next = new Date();
var theday=next.getUTCDate();
var themonth=next.getUTCMonth();
nexty=next.getUTCFullYear();
nexty++;
countdown(nexty,1,1);

Here is the HTML to make the countdown appear – style it as you wish

</pre>
<div id="time"></div>
<pre>

Leave a Reply

  • (will not be published)