19. januar 2003 - 11:48
#4
<SCRIPT LANGUAGE="Javascript">
var digit_images; // The array of digits 0-9
var separator_images; // The array for blank and colon images
var ampm_images; // The array of am and pm images
var image_base = "/html/images/"; // The directory where your digit images are located
var image_type = ".gif"; // The format your digit images are stored as (.gif , .jpg , etc.)
var image_height = 35; // The height of all of your images
var digit_width =12; // The width of your digits 0-9 images
var ampm_width = 38; // The width of your AM and PM images
var separator_width = 6; // The width of your colon separator image
var clockDelay = 30000; // The delay in milliseconds between clock updates. Because of delays
// in changing the image source this should be set to about 800-900
// for a one second delay and about 300-400 for a half second delay
var hour1 = "blank"; // The first digit in the hour of the day
var hour2 = "blank"; // The second digit in the hour of the day
var minute1 = "blank"; // The first digit in the minute of the day
var minute2 = "blank"; // The second digit in the minute of the day
var ampm; // Holds value to tell if it's AM or PM
var now; // Used in getting the current date
var cur_hour; // Used in getting the current hour from the date
var cur_minute; // Used in getting the current minutes from the date
function makeImageArray(length, ImageWidth, ImageHeight){ // Returns an array of Images where
this.length = length; // the index of the 1st array element is 0
for ( i = 0; i < length; i++ ){
this[i] = new Image(ImageWidth, ImageHeight);
}
return this;
}
nowserver = new Date();
nowserver.setHours(11);
nowserver.setMinutes(45);
datediff=nowserver-new Date();
function UpdateClock(hr1, hr2, min1, min2, separator){ // Updates the clock
now = new Date(new Date().valueOf()+datediff); // Get the current date
cur_hour = now.getHours(); // Get the current hour from the date
cur_minute = now.getMinutes(); // Get the current minutes from the date
// First determine if it is in the morning or afternoon
// if (cur_hour >= 12){ampm = "pm";}
// else{ampm = "am";}
// Then adjust the time to reflect "regular" time (i.e. hours 1-12 instead of the military 0-23)
// if (cur_hour >= 13){cur_hour = cur_hour - 12;}
// if (cur_hour == 0){cur_hour = 12;}
// Before we can break up the hours and minutes into individual digits
// we need to convert cur_hour and cur_minute to strings
cur_hour += "";
cur_minute += "";
// Now assign the individual hour digits to variables hour1 and hour2
if (cur_hour >= 10){
hour1 = cur_hour.charAt(0);
hour2 = cur_hour.charAt(1);
}
else{
hour1 = "0";
hour2 = cur_hour.charAt(0);
}
// Now assign the individual minute digits to variables minute1 and minute2
if (cur_minute >= 10){
minute1 = cur_minute.charAt(0);
minute2 = cur_minute.charAt(1);
}
else{
minute1 = "0";
minute2 = cur_minute.charAt(0);
}
// At this point we have all the variables assigned so we need to check and see if the any of the digits in the time has
// changed. If any of them have, then change the image source to reflect the digit that changed. NOTE: This only works
// with Netscape 3.0 or above, so check first to see what browser the user has
if (parseInt(navigator.appVersion.substring(0,1))>=3) { // Netscape 3.0 or greater
if (hour1 == "0"){document.clock1.src = image_base + "blank" + image_type;}
else {document.clock1.src = digit_images[hour1].src;}
document.clock2.src = digit_images[hour2].src;
if (separator == "blank"){document.clock3.src = separator_images[0].src;}
else {document.clock3.src = separator_images[1].src;}
document.clock4.src = digit_images[minute1].src;
document.clock5.src = digit_images[minute2].src;
// if (ampm == "am"){document.clock7.src = ampm_images[0].src;}
// else {document.clock7.src = ampm_images[1].src;}
}
// The time has been updated for this go around of the function call, so now call the function again recursively so that it
// can check for the next second. To avoid calling the function a gazillion times we will use setTimeout to pause for the
// time reflected in clockDelay before this function calls itself again. Doing it this way also allows us to change the
// separator image to reflect the seconds ticking away.
if (separator == "blank"){setTimeout("UpdateClock(hour1, hour2, minute1, minute2, 'colon')", clockDelay);}
else{setTimeout("UpdateClock(hour1, hour2, minute1, minute2, 'blank')", clockDelay);}
} // This bracket ends the UpdateClock function
// This script only works with Netscape 3.0 or above, so first check to see what browser the user has to make sure it's ok
// to make the calls to write to the document.
if (parseInt(navigator.appVersion.substring(0,1))>=3) { // Netscape 3.0 or greater
digit_images = new makeImageArray(10, digit_width, image_height);
separator_images = new makeImageArray(2, separator_width, image_height);
// ampm_images = new makeImageArray(2, ampm_width, image_height);
for ( i = 0; i < 10; i++ ){digit_images[i].src = image_base + i + image_type;}
separator_images[0].src = image_base + "colon" + image_type;
separator_images[1].src = image_base + "colon" + image_type;
//ampm_images[0].src = image_base + "am" + image_type;
//ampm_images[1].src = image_base + "pm" + image_type;
document.write('<IMG NAME="clock1" SRC="' + image_base + 'blank' + image_type + '" BORDER="0">');
document.write('<IMG NAME="clock2" SRC="' + image_base + 'blank' + image_type + '" BORDER="0">');
document.write('<IMG NAME="clock3" SRC="' + image_base + 'blank' + image_type + '" BORDER="0">');
document.write('<IMG NAME="clock4" SRC="' + image_base + 'blank' + image_type + '" BORDER="0">');
document.write('<IMG NAME="clock5" SRC="' + image_base + 'blank' + image_type + '" BORDER="0">');
document.write('<IMG NAME="clock6" SRC="' + image_base + 'blank' + image_type + '" BORDER="0">');
//document.write('<IMG NAME="clock7" SRC="' + image_base + 'blank' + image_type + '" WIDTH="' + ampm_width + '" HEIGHT="' + image_height + '" BORDER="0">');
// Finally, start the clock running using the UpdateClock function
UpdateClock("blank", "blank", "blank", "blank", "blank");
} // This bracket ends the Netscape 3.0 or above check
//-->
</SCRIPT>
Slettet bruger
19. januar 2003 - 12:13
#5
Og hvis du vil have en, der ikke kører med billeder:
<html>
<head>
<script>
function klokken() {
nu = new Date();
str = ((nu.getHours() < 10) ? "0" : "") + nu.getHours() + ":" + ((nu.getMinutes() < 10) ? "0" : "") + nu.getMinutes();
if (document.getElementById)
document.getElementById("ur").innerHTML = str;
else if (document.all)
document.all.ur.innerHTML = str;
setTimeout("klokken();", 1000);
}
</script>
</head>
<body onLoad="klokken();">
<span style="font-family: Arial; font-size: 18px;" id="ur"></span>
</body>
</html>