PDA

View Full Version : digital clock


alaios
08-13-2002, 09:54 PM
i want to create a digital clock but i dont want to use forms....
Is there any way to do that .?? I was trying to use the document.write but i cant do it continiously because destroy the javascript code!

nolachrymose
08-13-2002, 10:03 PM
<html>
<head>
<title>UpdateExact</title>
<script type="text/javascript">
function startClock() {
var now=new Date();
var h=(now.getHours()>12)?now.getHours()-12:now.getHours();
var m=(now.getMinutes()<10)?"0"+now.getMinutes():now.getMinutes();
var s=(now.getSeconds()<10)?"0"+now.getSeconds():now.getSeconds();
var ampm=(now.getHours()>11)?"PM":"AM";

document.getElementById("time").firstChild.nodeValue=h+":"+m+":"+s+" "+ampm;
setTimeout(startClock,1000-now.getMilliseconds());
}
</script>
</head>
<body>
<div id="time">8:88:88</div>
<script type="text/javascript">startClock();</script>
</body>
</html>

Hope that helps!

Happy coding! :)

Skyzyx
08-14-2002, 02:08 AM
You could also try this one. This has the flashing colon between the hour and the minutes. It works with any browser that supports innerHTML.


<html>
<head>
<script language="javascript">
<!--
var flashingdots = 1;

function zClock()
{
// Comment out for flashing dots
//var flashingdots=1;

// RUNTIME INITIALIZATION
var ampm = 0;
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();

// SET AM OR PM FOR 12-HOUR CLOCK CYCLE
if (hours < 12) ampm="am";
else if (hours > 11) ampm="pm";

// SWITCH FROM A 24-HOUR TO A 12-HOUR CLOCK CYCLE
if (hours==0) hours=hours+12; // If Midnight is coming up as Zero O'Clock, then fix it.
else if (hours > 12) hours=hours-12; // If 1:00pm is coming up as 13 O'Clock, then fix it.

// MINUTE FIX
if (minutes < 10) minutes="0"+minutes; // If 3:05 is showing up as 3:5, then fix it.

// SECOND FIX
if (seconds < 10) seconds="0"+seconds; // If 7:25:02 is showing up as 7:25:2, then fix it.

// FLASHING DOTS DISPLAY
if (flashingdots == 1)
{
var ztime=hours+':'+minutes+ampm;
flashingdots=0;
}
else if (flashingdots == 0)
{
var ztime=hours+'&nbsp;'+minutes+ampm;
flashingdots=1;
}
else
{
flashingdots=1;
}

var zShowTime=document.getElementById('zClockID');
zShowTime.innerHTML=ztime;

setTimeout("zClock();", 500);
}
//-->
</script>
</head>
<body onLoad="zClock();">
<span id="zClockID"></span>
</body>
</html>


Hope this helps! =)

beetle
08-14-2002, 02:16 AM
Cool little clock. I'd make sure to use a monospaced font tho, so there's no funny 'movement' of the numbers

brothercake
08-14-2002, 12:50 PM
you could use images http://www.brothercake.com/scripts/digclock.shtml

Quiet Storm
10-17-2002, 05:38 AM
I've got something like that on my site, too. Shows the time in my location automaticly! :D

I've included Day, Date, LocalTime, am/pm, even updating seconds - all without a form tag.

*cross-browser, too!*

<html>




<script language="JavaScript">
<!--//
var nav=navigator.userAgent.toLowerCase();
var isopera=false;
if (nav.indexOf('opera')!=-1) isopera=true;

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getFullYear()
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 tz=Math.round(mydate.getTimezoneOffset()/60)
var Timezone=-1 //Change this number for your time zone - 1 for Scotland
tz+=Timezone
var hourss=hours+tz;
hourss>=24?hourss-=24:hourss;
hourss<=0?hourss+=24:hourss;
if (hourss==24) hourss=0

var dn="am"
var dns="am"

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

if (hourss>=12)
{
dns="pm"
hourss-=12
}

if ((daym == "1") || (daym == "21") || (daym == "31")){ DayType = "st" }
else if ((daym == "2") || (daym == "22")){ DayType = "nd" }
else if ((daym == "3") || (daym == "23")){ DayType = "rd" }
else (DayType = "th")

if (hourss==0) hourss=12
if (minutes<=9) minutes="0"+minutes
if (seconds<=9) seconds="0"+seconds


if (mydate.getDay()!=0)
cdate=dayarray[day]+",&nbsp;"+montharray[month]+"&nbsp;"+daym+"<SUP>"+DayType+"</SUP>,&nbsp;"+year+"
Local Time: "+hourss+":"+minutes+"<FONT SIZE=-2>:"+seconds+"&nbsp;"+dns+"</FONT>"
else
cdate=dayarray[day]+",&nbsp;"+montharray[month]+"&nbsp;"+daym+"<SUP>"+DayType+"</SUP>,&nbsp;"+year+"
Local Time: "+hourss+":"+minutes+"<FONT SIZE=-2>:"+seconds+"&nbsp;"+dns+"</FONT>"


if (document.all&&isopera!=true)
{
document.all.clock.style.position='relative'
document.all.clock.innerHTML=cdate
}
else if (document.layers)
{document.clock.visibility='show'
document.clock.document.open();
document.clock.document.write('<center>'+cdate+'</center>');
document.clock.document.close();}
else if (document.getElementById&&isopera!=true)
{
document.getElementById("clock").innerHTML=cdate
}
else document.write('<center>'+cdate+'</center>')
}

if (!document.layers&&!document.all&&!document.getElementById) getthedate()
else if (isopera!=true) setInterval("getthedate()",1000)
else getthedate();
//-->
</script>


<div id="clock" style="border: solid #000000; border-width: 1px
0px; color:#0000ff; position:absolute; top:10px; left:10px;
width:100%; height:25px;"></div>


</HTML>

^KoalaBear^
10-17-2002, 07:50 AM
I checked out your site... and very good it was too, Matey!... AND your date and local time script, which is of interest to me.

If you intended to show YOUR local time AND date, I think your date setting is 24 hours out (fast). If possibly you intended for your script to show the visitor's date but YOUR local time, then it is correct. If I've screwed up.. which will make me wrong the second time this century (hehe... :o ) I sincerely apologise. :D

See attached screen capture pic with notations...

I am trying to work out how your script might be modified to show the 'webmaster's local date and time' to visitors. Can you help me do you think?

Cheers!
KB...

:thumbsup:

EDIT NOTE: Sorry the screen capture pic was too large to upload here.

glenngv
10-17-2002, 07:54 AM
you need to insert a server-side date.
if you are using asp:

function getthedate(){
var mydate=new Date("<%=Date()%>");
...

^KoalaBear^
10-17-2002, 08:12 AM
If your post was directed to me... then no, I was just using the script used by Quiet Storm on his site.... which runs from a .js file. I am totally ignorant of any script other than javascript at the moment, and even on that I'd loose my life if I was betting on it with my JS skills! LOL.

Do you have a ready made ASP script that would do the job? Somewhere many moons ago I saw a site which listed local times for about 6 major cities around the world. I knew I shoulda bookmarked it then! :rolleyes: LOL

Cheers
KB...
:thumbsup:

glenngv
10-17-2002, 09:07 AM
ok i was wrong.

i realized that you can't make a running clock that shows the server's time not the client's.

but what i was saying is that you can display a static time from the server using javascript. :)

^KoalaBear^
10-17-2002, 09:39 AM
Originally posted by glenngv
but what i was saying is that you can display a static time from the server using javascript. :)

Sorry glenngv, but because of my lack of 'techi' you've lost me. Are you saying it is possible to code javascript to show a site's (webmaster's server) static time but not date? By static I'm assuming you mean a clock which displays a fixed time and doesn't move on like the examples shown in this thread... presumedly at some point of the page opening? Or by 'time' do you mean 'date', again fixed at the webmaster's server's local date?

What I'm trying to find is a script where on my page, I might display in REAL local time... in any format... digitally or otherwise.
"Right now in Adelaide it is date/time"
"Right now in London it is date/time"
"Right now in New York it is date/time"
"Right now in Brussels it is date/time"
"Right now in Tokyo it is date/time"
.... etc etc etc.

Cheers!
KB

Roelf
10-17-2002, 09:45 AM
Originally posted by glenngv
ok i was wrong.

i realized that you can't make a running clock that shows the server's time not the client's.

Actually you can, at the pageload, read the servertime and then use client-side javascript to process the running of the clock, the servertime has the same speed as the client time you know :D

glenngv
10-17-2002, 09:57 AM
^KoalaBear^

here's the link for a universal clock script:

http://javascript.internet.com/clocks/universal-clock.html

you can start with it. it displays a running local and UTC date/time. As long as you know the difference of each location to UTC, you can display its corresponding date/time.

roelf, maybe yes, but i think it would be difficult to get the next date/time for every second elapsed. you cant use the methods getHours(), getMinutes(), getSeconds(), you have to code it manually

Roelf
10-17-2002, 10:08 AM
Originally posted by glenngv
[Broelf, maybe yes, but i think it would be difficult to get the next date/time for every second elapsed. you cant use the methods getHours(), getMinutes(), getSeconds(), you have to code it manually [/B]

no you donīt, use glenngvīs:

function getthedate(){
var mydate=new Date("<%=Date()%>");
}

as an init function, this give you a client side date object with the server date as content which can be used client-side with all its properties and methods

then you can use a function tick() which runs every second to show the correct time

glenngv
10-17-2002, 10:21 AM
and what tick() would look like?
as i said it would be difficult to get the next date/time for every second elapsed. you cant use the methods getHours(), getMinutes(), getSeconds(), you have to code it manually.

Roelf
10-17-2002, 10:28 AM
in the tick function, you can alter the dateobject like:
objDate.setSeconds(objDate.getSeconds + 1)
then get the new time with the available methods

^KoalaBear^
10-17-2002, 10:52 AM
Thanks for the link Mate... I'm gonna give it a burl. Standby to throw me a lifebuoy LOL
Cheers
KB...

PauletteB
10-17-2002, 05:30 PM
saldikey

The guys are replying to the original post by alaios.

Maybe you should have started another post since it is a new question. (I could be wrong on this, but it make sense to me.)

To answer your question, to make your clock work, use

setTimeout("myClock(0);",500);

saldikey
10-17-2002, 05:54 PM
ok I will do it

adios
10-17-2002, 06:18 PM
brothercake...

never mind this other stuff...your clock wins.

hadn't seen the new site design - beautiful work, tasteful & functional and...thank God, *more jigsaw puzzles*.

still looking, there's a lot there...again, excellent :thumbsup:

adios

ConfusedOfLife
10-17-2002, 08:49 PM
Hi, I'm not that good in time, date and better to say anything that relates to the real world! I saw your code and your site ( very beautiful indeed ) and I know that it's a little late to ask this question, but I just saw this thread. In your code, you have :



var tz=Math.round(mydate.getTimezoneOffset()/60)



As I know it always gives us the negative value, I mean I tried that and I saw that it gives me '-3', since I'm in Iran and my zone offset is 3.5, that precision disappears by Math.round, but it shouldn't give me the negative number, anyway, then you define 'Timezone' like this :


var Timezone = -1 // Because you live in Scotland


So, I conclude that I should put 3 instead of -1 coz I'm living in Iran, ok, now if we write tz += Timezone then it's gonna always be zero! And it means that hourss is always equal to hours, what am I missing in here?!

^KoalaBear^
10-18-2002, 02:07 AM
I could be wrong but if Iran is 3.5 hours ahead of Greenwich Mean Time (GMT and London) then your value would be +3.5 as mine in Adelaide, Australia is +9 hours. Try that anyway, my friend. If I've mislead you I apologise as I'm still very much a newbie at all this coding business.

Cheers!
KB...

ConfusedOfLife
10-20-2002, 11:22 PM
I think that it should be like this, but the funny part is that when I double click my clock icon in windows tray and I check for my time zone, I see +3.5, the thing that I entered myself! But when I try to get it in JS, I get -3.5! But even if I got +3.5, what's the reason of putting Timezone in the program and asking the user to enter exactly what Math.round(mydate.getTimezoneOffset()/60) is gonna give us, we could have multiplied the second sentence by 2 and have the same results!

^KoalaBear^
10-21-2002, 03:42 AM
Sorry Mate... I can't help you. As I said I am a novice at coding. Perhaps one of our senior techis can suggest something.:cool:

ConfusedOfLife
10-22-2002, 01:52 PM
It's ok, thanks, you tried to help me and I appreciate it.