Style 1d

You may freely use any script found on this site on both personal & commercial webpages. However, you may not sell the scripts or redistribute the scripts by, for example, putting them on another script archive or CD ROM.

If you use any of the scripts, the following credits included in the code must remain intact:

/*
Count down until any date script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
Modified by Robert M. Kuhnhenn, D.O.
on 5/30/2006 to count down to a specific date AND time
and on 10/20/2007 to a new format
*/

This one is a little more complicated because it uses two images that you will need to copy and place in your page in iWeb. One is a background image for the numbers, the other is a black line that goes through the numbers.

To insert this timer into your page, first select the code by clicking on the "Select entire code" button, then copy it and insert it in an HTML Snippet to get the countdown timer shown above. The code is repeated further below with color coding to show what you need to change (explained further below).

<head>

.background {

border-style: none;

width: 62px;

height: 58px;

}

.numbers {

border-style: none;

background-color: #292929;

padding: 0px;

width: 62px;

height: 42px;

text-align: center;

font-family: Arial;

font-size: 40px;

font-weight: normal; /* options are normal, bold, bolder, lighter */

color: #FFFFFF; /* change color using the hexadecimal color codes for HTML */

}

.title { /* the styles below will affect the title under the numbers, i.e., “Days”, “Hours”, etc. */

border: none;

padding: 0px;

margin: 0px 3px;

width: 62px;

text-align: center;

font-family: Arial;

font-size: 10px;

font-weight: normal; /* options are normal, bold, bolder, lighter */

color: #999999; /* change color using the hexadecimal color codes for HTML */

background-color: #000000;

}

#form { /* the styles below will affect the outer border of the countdown timer */

width: 400px;

height: 80px;

border-style: ridge; /* options are none, dotted, dashed, solid, double, groove, ridge, inset, outset */

border-width: 2px;

border-color: #666666; /* change color using the hexadecimal color codes for HTML */

background-color: #000000;

padding: 5px;

}

.line {

width: 62px;

height: 2px;

z-index: 15;

}

</style>

</head>

<body>

</form>

Count down until any date script-

By JavaScript Kit (www.javascriptkit.com)

Over 200+ free scripts here!

Modified by Robert M. Kuhnhenn, D.O.

on 5/30/2006 to count down to a specific date AND time

and on 10/20/2007 to a new format

//-->change the text below to reflect what you want the script to display when the target date and time are reached, limit to 20 characters

var current="Winter has arrived!"

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countdown(yr,m,d,hr,min){

theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min

var today=new Date()

var todayy=today.getYear()

if (todayy < 1000) {

todayy+=1900 }

var todaym=today.getMonth()

var todayd=today.getDate()

var todayh=today.getHours()

var todaymin=today.getMinutes()

var todaysec=today.getSeconds()

var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec

futurestring=montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min

dd=Date.parse(futurestring)-Date.parse(todaystring)

dday=Math.floor(dd/(60*60*1000*24)*1)

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(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){

document.forms.count.count2.value=current;

document.forms.count.count2.style.display="block";

document.forms.count.dday.style.display="none";

document.forms.count.dhour.style.display="none";

document.forms.count.dmin.style.display="none";

document.forms.count.dsec.style.display="none";

document.forms.count.days.style.display="none";

document.forms.count.hours.style.display="none";

document.forms.count.minutes.style.display="none";

document.forms.count.seconds.style.display="none";

return;

}

else {

document.forms.count.count2.style.display="none";

document.forms.count.dday.value=dday;

document.forms.count.dhour.value=dhour;

document.forms.count.dmin.value=dmin;

document.forms.count.dsec.value=dsec;

setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);

}

//-->enter the count down target date and time using the format year,month,day,hour (24 hour clock),minute

countdown(2009,12,21,12,47)

</script>

</body>

Countdown to the start of Winter in the Northern Hemisphere: December 21, 2009; 12:47 PM EST

You must change the items in light blue (in the code below, which is a duplicate of the code you can select and copy above) to reflect what you want the script to display when the target date and time are reached and to set the target date and time. You must also change the code to let it know where the number's background image and the black line are located. To do that, change the eight areas of the code marked in light green to the name of YOUR page plus "_files", so, e.g., if the page you are placing the code in is named "Home", change the code marked in light green to "Home_files" (since that is where the images will be stored). You can also change some of the formating by changing the items marked in yellow. Comments are noted in magenta.

Now save these two images and insert them into your web page as described below:

bkgdimage.gif

line.jpg

Save the images to your desktop by control-clicking (or right-clicking) on each image name then select "Download Linked File" from the pop-up menu. Make sure their names are maintained (bkgdimage.gif and line.jpg). Then select each image, copy and paste them (or drag them from your desktop) into your iWeb page, delete any border that iWeb put on these images by going to the inspector window and clicking on the graphics icon to get to the "Graphic" pane, then in the dropdown selection menu under "Stroke", select "None". Now position each image over the countdown timer HTML Snippet, then hide them behind the countdown timer by selecting the image and clicking on "Backward" in the bottom toolbar in iWeb until it is hidden by the timer. They won't show up in the timer until after you publish the page.