PDA

View Full Version : no onload clock?

mattover-matter
03-25-2003, 04:06 AM
I have this clock:
<html>
<head>
<title> </title>
<style type='text/css'>
body {
background-color: #000000;
margin: 0;
scrollbar-base-color: #000000;
scrollbar-arrow-color: #2255FF;
color: #FFFFFF;
}

table,td{
margin: 0;
padding: 0;
cell-spacing: 0;
border: 0;
border-collapse: collapse
}

.clock {
background-color: transparent;
border: transparent;
color: #ffffff;
}
</style>
<script language="JavaScript">
<!--

function startclock()
{
var thetime=new Date();

var nhours =thetime.getHours();
var nmins =thetime.getMinutes();
var nsecn =thetime.getSeconds();
var nday =thetime.getDay();
var nmonth =thetime.getMonth();
var ntoday =thetime.getDate();
var nyear =thetime.getYear();
var AorP =" ";

if (nhours>=12)
AorP="P.M.";
else
AorP="A.M.";

if (nhours>=13)
nhours-=12;

if (nhours==0)
nhours=12;

if (nsecn<10)
nsecn="0"+nsecn;

if (nmins<10)
nmins="0"+nmins;

if (nday==0)
nday="Sunday";
if (nday==1)
nday="Monday";
if (nday==2)
nday="Tuesday";
if (nday==3)
nday="Wednesday";
if (nday==4)
nday="Thursday";
if (nday==5)
nday="Friday";
if (nday==6)
nday="Saturday";

nmonth+=1;

if (nyear<=99)
nyear= "19"+nyear;

if ((nyear>99) && (nyear<2000))
nyear+=1900;

document.clockform.clockspot.value=nhours+": "+nmins+": "+nsecn+" "+AorP+" "+nday+", "+nmonth+"/"+ntoday+"/"+nyear;

setTimeout('startclock()',1000);

}

//-->

</script>
</head>
<body background="space.gif">









<FORM name="clockform">
<INPUT TYPE="text" readonly="readonly" name="clockspot" size="40" class="clock">
</FORM>
<SCRIPT language="JavaScript">
<!--
startclock();
//-->
</SCRIPT>

</body>
</html>

But, is there anyway to get it out of a textbox an just plain text without an onload event?
Graeme Hackston
03-25-2003, 04:31 AM
You can use innerHTML on a div, h1 or just about any element. I used a span here.


<html>
<head>
<title> </title>
<style type='text/css'>
body {
background-color: #000000;
margin: 0;
scrollbar-base-color: #000000;
scrollbar-arrow-color: #2255FF;
color: #FFFFFF;
}

table,td{
margin: 0;
padding: 0;
cell-spacing: 0;
border: 0;
border-collapse: collapse
}

.clock {
background-color: transparent;
border: transparent;
color: #ffffff;
}
</style>
<script language="JavaScript">
<!--

function startclock()
{
var thetime=new Date();

var nhours =thetime.getHours();
var nmins =thetime.getMinutes();
var nsecn =thetime.getSeconds();
var nday =thetime.getDay();
var nmonth =thetime.getMonth();
var ntoday =thetime.getDate();
var nyear =thetime.getYear();
var AorP =" ";

if (nhours>=12)
AorP="P.M.";
else
AorP="A.M.";

if (nhours>=13)
nhours-=12;

if (nhours==0)
nhours=12;

if (nsecn<10)
nsecn="0"+nsecn;

if (nmins<10)
nmins="0"+nmins;

if (nday==0)
nday="Sunday";
if (nday==1)
nday="Monday";
if (nday==2)
nday="Tuesday";
if (nday==3)
nday="Wednesday";
if (nday==4)
nday="Thursday";
if (nday==5)
nday="Friday";
if (nday==6)
nday="Saturday";

nmonth+=1;

if (nyear<=99)
nyear= "19"+nyear;

if ((nyear>99) && (nyear<2000))
nyear+=1900;

document.getElementById('spanspot').innerHTML=nhours+": "+nmins+": "+nsecn+" "+AorP+" "+nday+", "+nmonth+"/"+ntoday+"/"+nyear;

setTimeout('startclock()',1000);

}

//-->

</script>
</head>
<body background="space.gif">

<span id="spanspot"></span>

<SCRIPT language="JavaScript">
<!--
startclock();
//-->
</SCRIPT>

</body>
</html>
mattover-matter
03-25-2003, 05:14 AM
How would I change the font size of the clock?

tried

font-size: 10px;

but nothing happened.
Graeme Hackston
03-25-2003, 10:16 PM
<html>
<head>
<title> </title>
<style type='text/css'>

#spanspot {
font-size: 10px;
}

body {
background-color: #000000;
margin: 0;
scrollbar-base-color: #000000;
scrollbar-arrow-color: #2255FF;
color: #FFFFFF;
}

table,td{
margin: 0;
padding: 0;
cell-spacing: 0;
border: 0;
border-collapse: collapse
}

.clock {
background-color: transparent;
border: transparent;
color: #ffffff;
}
</style>
<script language="JavaScript">
<!--

function startclock()
{
var thetime=new Date();

var nhours =thetime.getHours();
var nmins =thetime.getMinutes();
var nsecn =thetime.getSeconds();
var nday =thetime.getDay();
var nmonth =thetime.getMonth();
var ntoday =thetime.getDate();
var nyear =thetime.getYear();
var AorP =" ";

if (nhours>=12)
AorP="P.M.";
else
AorP="A.M.";

if (nhours>=13)
nhours-=12;

if (nhours==0)
nhours=12;

if (nsecn<10)
nsecn="0"+nsecn;

if (nmins<10)
nmins="0"+nmins;

if (nday==0)
nday="Sunday";
if (nday==1)
nday="Monday";
if (nday==2)
nday="Tuesday";
if (nday==3)
nday="Wednesday";
if (nday==4)
nday="Thursday";
if (nday==5)
nday="Friday";
if (nday==6)
nday="Saturday";

nmonth+=1;

if (nyear<=99)
nyear= "19"+nyear;

if ((nyear>99) && (nyear<2000))
nyear+=1900;

document.getElementById('spanspot').innerHTML=nhours+": "+nmins+": "+nsecn+" "+AorP+" "+nday+", "+nmonth+"/"+ntoday+"/"+nyear;

setTimeout('startclock()',1000);

}

//-->

</script>
</head>
<body background="space.gif">

<span id="spanspot"></span>

<SCRIPT language="JavaScript">
<!--
startclock();
//-->
</SCRIPT>

</body>
</html>
mattover-matter
04-15-2003, 09:20 PM
ok, how can I make it say before "it is currently"

document.clockform.clockspot.value=nhours+": "+nmins+": "+nsecn+" "+AorP+" "+nday+", "+nmonth+"/"+ntoday+"/"+nyear;


THat confuses me

I would think it would be

"+nhours+":"+nmins"etc...but it is not. I tried numberous things but it just stoped showing entirely. I don't want to create another id for it entirely really...
Skyzyx
04-15-2003, 11:45 PM
Well, here's a snippet from near the bottom of your code:


if ((nyear>99) && (nyear<2000))
nyear+=1900;

document.getElementById('spanspot').innerHTML="It is currently "+nhours+":"+nmins+":"+nsecn+" "+AorP+" "+nday+", "+nmonth+"/"+ntoday+"/"+nyear;

setTimeout('startclock()',1000);