Show Date and Time on a web Page

jspe377522 · May 26, 2002

Hi there, I am looking to show the date and time on a web page. I found a javascript on javascript.com and this does pretty much everything but i can not change the font size etc of the date section. I was hoping someone would be able to help.

Cheers
James

Here is the script.

<script language="JavaScript">

<!--
s_date = new Date();
var weekDay = "";

selectMonth = new Array(12);
selectMonth[0] = "January";
selectMonth[1] = "February";
selectMonth[2] = "March";
selectMonth[3] = "April";
selectMonth[4] = "May";
selectMonth[5] = "June";
selectMonth[6] = "July";
selectMonth[7] = "August";
selectMonth[8] = "September";
selectMonth[9] = "October";
selectMonth[10] = "November";
selectMonth[11] = "December";

if(s_date.getDay() == 1){
weekDay = "Monday";
}
if(s_date.getDay() == 2){
weekDay = "Tuesday";
}
if(s_date.getDay() == 3){
weekDay = "Wednesday";
}
if(s_date.getDay() == 4){
weekDay = "Thursday";
}
if(s_date.getDay() == 5){
weekDay = "Friday";
}
if(s_date.getDay() == 6){

weekDay = "Saturday";
}
if(s_date.getDay() == 7){
weekDay = "Sunday";
}
if(s_date.getDay() == 0){
weekDay = "Sunday";
}

var setYear = s_date.getYear();

var BName = navigator.appName;

if(BName == "Netscape&quot

{
var setYear = s_date.getYear() + 1900;
}

document.write(weekDay + ", " + selectMonth[s_date.getMonth()] + " " +
s_date.getDate() + ", " + setYear);

// -->

</script>

<div id=Clock align=Center style="font-family Tahoma; font-size: 28; color:Black"> </div>

<script language = "JavaScript">

//This script was created by Gary Perry
//Email: shadow_chaser@hotmail.com
//Web:

http://www.garyperry.com

//This script will display a real time clock at the top of your webpage.

//Put this code in the body section of your webpage, and that's all
//there is to it. No images to worry about, nothing, except it
//only works for IE 4 and above.

//Change the color of the font above in the div tag to match your webpage
//colors.

function tick() {
var hours, minutes, seconds, ap;
var intHours, intMinutes, intSeconds;
var today;

today = new Date();

intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();

switch(intHours){
case 0:
intHours = 12;
hours = intHours+":";
ap = "A.M.";
break;
case 12:
hours = intHours+":";
ap = "P.M.";
break;
case 24:
intHours = 12;
hours = intHours + ":";
ap = "A.M.";
break;
default:
if (intHours > 12)
{
intHours = intHours - 12;
hours = intHours + ":";
ap = "P.M.";
break;
}
if(intHours < 12)
{
hours = intHours + ":";
ap = "A.M.";
}
}

if (intMinutes < 10) {
minutes = "0"+intMinutes+":";
} else {
minutes = intMinutes+":";
}

if (intSeconds < 10) {
seconds = "0"+intSeconds+" ";
} else {
seconds = intSeconds+" ";
}

timeString = hours+minutes+seconds+ap;

Clock.innerHTML = timeString;

window.setTimeout("tick();", 100);
}

window.onload = tick;

</script>

dislimbic · May 26, 2002

move the closing </div> tag down from right after the <div> to after your closing </script> tag. The way it is right now, the div isn't doing anything. Next, you probably have to fix the syntax in the style attribute of the <div> tag
<div id=Clock align=Center style="font-family: Tahoma; font-size: 28; color:Black">
you were missing a :, that should do it for you. I didn't check the script or anyhting, but you said that works, so...

I hope this helps

dis

jspe377522 · May 26, 2002

Thanks for that. I solved it with what i think is a better script. Less going on i think. So i am posting it for all to see.

Cheers
James

<BODY>

<body onLoad="goforit()">

<script language="JavaScript">

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday&quot

var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December&quot

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<center><font color='000000'; font size='1pt'; face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></center>"
if (document.all)
document.all.clock.innerHTML=cdate
else
document.write(cdate)
}
if (!document.all)
getthedate()
function goforit(){
if (document.all)
setInterval("getthedate()",1000)
}

</script>
<span id="clock"></span>

trollacious · May 26, 2002

Rather than use getYear(), use getFullYear() and you won't have to add 1900 to the year.

Also, combine:

if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}

to:

if (hours>=12)
{
dn="PM";
if (hours > 12) hours-=12;
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Show Date and Time on a web Page

jspe377522

MIS

dislimbic

Programmer

jspe377522

MIS

trollacious

Programmer

Similar threads

Part and Inventory Search

Sponsor