I found these 2 simple scripts online. The first one displays the time, and the second one displays the date. Are they compatible with all major browsers? <script type="text/javascript"> // <![CDATA[ function init ( ) { timeDisplay = document.createTextNode ( "" ); document.getElementById("clock_span").appendChild ( timeDisplay ); } function updateClock ( ) { var currentTime = new Date ( ); var currentHours = currentTime.getHours ( ); var currentMinutes = currentTime.getMinutes ( ); var currentSeconds = currentTime.getSeconds ( ); // Pad the minutes and seconds with leading zeros, if required currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes; currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds; // Choose either "AM" or "PM" as appropriate var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM"; // Convert the hours component to 12-hour format if needed currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours; // Convert an hours component of "0" to "12" currentHours = ( currentHours == 0 ) ? 12 : currentHours; // Compose the string for display var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay; // Update the time display document.getElementById("clock_span").firstChild.nodeValue = currentTimeString; } // ]]> </script> <span id="clock_span"> </span> Code (markup): <script type="text/javascript"> // <![CDATA[ // Get today's current date. var now = new Date(); // Array list of days. var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'); // Array list of months. var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December'); // Calculate the number of the current day in the week. var date = ((now.getDate()<10) ? "0" : "")+ now.getDate(); // Calculate four digit year. function fourdigits(number) { return (number < 1000) ? number + 1900 : number; } // Join it all together today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear())) ; // Print out the data. document.write(today); // ]]> </script> Code (markup):
The two scripts will work with all major browsers on the face of it (provided they are each called or used correctly), but in the interests of efficiency, it may help to formally merge them. The first script which covers the time, is having its result displayed via DOM methods. The second script which covers the calendar date, is having its result displayed via document.write. Those 2 ways don't go well together, so choosing a common method is advisable. Also, the first way uses the variable 'currentTime' to store the instantaneous date-time information, while the second script is using the 'now' variable to do exactly the same thing - more reason to merge them. Anyway, here's a merged version of those scripts, using DOM methods to show the result. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Test</title> <script type="text/javascript"> // Global variables var currentDateString; var currentTimeString; // Calculate four digit year. function fourdigits(number) { return (number < 1000) ? number + 1900 : number; } function updateClock ( ) { var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'); var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December'); // Store the time + date information at the current point in time var currentTime = new Date ( ); // TIME-RELATED COMPUTATIONS var currentHours = currentTime.getHours ( ); var currentMinutes = currentTime.getMinutes ( ); var currentSeconds = currentTime.getSeconds ( ); // Pad the minutes and seconds with leading zeros, if required currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes; currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds; // Choose either "AM" or "PM" as appropriate var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM"; // Convert the hours component to 12-hour format if needed currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours; // Convert an hours component of "0" to "12" currentHours = ( currentHours == 0 ) ? 12 : currentHours; // Finally, compose the time string for display currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay; // DATE-RELATED COMPUTATIONS // Calculate the number of the current day in the week. var date = ((currentTime.getDate()<10) ? "0" : "") + currentTime.getDate(); // Finally, compose the date string for display currentDateString = days[currentTime.getDay()] + ", " + months[currentTime.getMonth()] + " " + date + ", " + (fourdigits(currentTime.getYear())) ; } function showIt() { updateClock(); var timeDisplay = document.createTextNode ( "" ); document.getElementById("clock").appendChild ( timeDisplay ); document.getElementById("clock").firstChild.nodeValue = currentTimeString; var dateDisplay = document.createTextNode ( "" ); document.getElementById("calendar").appendChild ( dateDisplay ); document.getElementById("calendar").firstChild.nodeValue = currentDateString; } </script> </head> <body> <p>The time: <span id="clock"></span></p> <p>The date: <span id="calendar"></span></p> <form action=""> <input type="button" onclick="showIt()" value="Show Date & Time"> </form> </body> </html> Code (markup): Or, the showIt() function could be replaced by the following shorter version using innerHTML instead of DOM methods. function showIt() { updateClock(); document.getElementById("clock").innerHTML = currentTimeString; document.getElementById("calendar").innerHTML = currentDateString; } Code (markup):