473,734 Members | 2,211 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

clock in javascript

is there a way to display a ticking clock in a web page using
javascript? but not in a textbox, rather as text that i can change the
style, font etc.

cenk tarhan

Dec 30 '06 #1
12 4097
VK

ce************@ gmail.com wrote:
is there a way to display a ticking clock in a web page using
javascript? but not in a textbox, rather as text that i can change the
style, font etc.
<http://www.dynamicdriv e.com/dynamicindex6/clock2.htm>

see <http://www.dynamicdriv e.com/dynamicindex6/for more

Dec 30 '06 #2
thanks a lot VK, for the qucikest reply ever!

Dec 30 '06 #3
ce************@ gmail.com wrote:
is there a way to display a ticking clock in a web page using
javascript? but not in a textbox, rather as text that i can change the
style, font etc.

cenk tarhan
<html>
<head>
<title>Clock</title>
</head>
<body>
<body>
<div id='clock' class='somecsss tyle'></div>

<script langage='javasc ript :-P' type='text/javascript'>
var months=new Array("January" , "February", "Mararch", "April",
"May", "June", "Julu", "August", "September" , "October", "November",
"December") ;
var calDays=new Array("Sunday", "Monday", "Tuesday", "Wednesday" ,
"Thursday", "Friday", "Saturday") ;
var clockID = document.getEle mentById('clock ');

function pad(i) {
//simple function to just add a zero in front of numbers less
than zero (so we get 12:05 instead of 12:5)
if (i < 10) {
i = "0"+i;
}
return(i);
}

function doClock() {
setTimeout( "doClock()" , 1000 );
t = new Date();
m = t.getMonth();
d = t.getDay();
dt = t.getDate();
y = t.getFullYear() ;
h = t.getHours();
if (h < 12) {
ap="AM";
} else {
ap="PM";
h=h-12;
}
mn= pad(t.getMinute s());
s = pad(t.getSecond s());
if (h==0) {
h = 12
}
clockID.innerHT ML=calDays[d]+", "+months[m]+" "+dt+"
"+y+"<BR>"+h+": "+mn+":"+s+ " "+ap;
}

doClock()
</script>
</body>

</html>

Happy new year -- or else!

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA
Dec 30 '06 #4
pcx99 wrote:
ce************@ gmail.com wrote:
>is there a way to display a ticking clock in a web page using
javascript? but not in a textbox, rather as text that i can change the
style, font etc.
[...]
<div id='clock' class='somecsss tyle'></div>

<script langage='javasc ript :-P' type='text/javascript'>
Was there ever a script element attribute called 'langage'? ;-)

var months=new Array("January" , "February", "Mararch", "April",
"May", "June", "Julu", "August", "September" , "October", "November",
"December") ;
I think you need to use a spell checker.

var calDays=new Array("Sunday", "Monday", "Tuesday", "Wednesday" ,
"Thursday", "Friday", "Saturday") ;
var clockID = document.getEle mentById('clock ');

function pad(i) {
//simple function to just add a zero in front of numbers less than
zero (so we get 12:05 instead of 12:5)
if (i < 10) {
i = "0"+i;
}
return(i);
}
A more concise function for this case is:

function pad(i){
return (i<10)? '0'+i : ''+i;
}

function doClock() {
setTimeout( "doClock()" , 1000 );
Simply setting a timeout of 1000 ms does not guarantee that the function
will run at exactly 1 second intervals, otherwise you could just use
setInterval.

t = new Date();
m = t.getMonth();
d = t.getDay();
dt = t.getDate();
y = t.getFullYear() ;
h = t.getHours();
if (h < 12) {
ap="AM";
} else {
ap="PM";
h=h-12;
}
mn= pad(t.getMinute s());
s = pad(t.getSecond s());
if (h==0) {
h = 12
I never understood the concept of representing times between midnight
and 1:00 am as 12:xx am. Why not 00:xx am? There is far less chance of
confusion. A large percentage of the world uses a 24hr clock, so maybe
that's a better idea.

I don't know why anyone wants to put an clock in a web page unless it's
to display the time somewhere other that where the visitor is located.
Anyhow, here's another effort. I find changing the value of a text node
causes less flicker and is faster in some browsers than changing the
innerHTML.

<script type="text/javascript">

function Clock(id) {
if (typeof id == 'string') id = document.getEle mentById(id);
this.el = id;
}

Clock.prototype .month = ['Jan','Feb','Ma r','Apr','May', 'Jun',
'Jul','Aug','Se p','Oct','Nov', 'Dec'];

Clock.prototype .day = ['Sun','Mon','Tu e','Wed','Thu', 'Fri','Sat'];

Clock.prototype .addZ = function(n){ return (n<10)? '0'+n: ''+n; };

Clock.prototype .tick = function(){
var clock = this;
var t = new Date();
this.el.firstCh ild.data = clock.day[t.getDay()] + ', '
+ clock.addZ(t.ge tDate()) + ' '
+ clock.month[t.getMonth()] + ' '
+ t.getFullYear() + ', '
+ clock.addZ(t.ge tHours()) + ':'
+ clock.addZ(t.ge tMinutes()) + ':'
+ clock.addZ(t.ge tSeconds());

setTimeout(func tion(){clock.ti ck();}, (1.05 - t.getMillisecon ds()));
}

</script>

<span id="clock">&nbs p;</span>
<script type="text/javascript">
var digClock = new Clock('clock'); digClock.tick() ;
</script>
--
Rob
Dec 31 '06 #5
Lee
RobG wrote:
I never understood the concept of representing times between midnight
and 1:00 am as 12:xx am.
That's how it's been represented on most analog clocks for centuries.
Dec 31 '06 #6
Lee wrote:
RobG wrote:
I never understood the concept of representing times between midnight
and 1:00 am as 12:xx am.

That's how it's been represented on most analog clocks for centuries.
Which doesn't explain why it should be used with digital clocks based
on 24 hr time, even those that wish to use 12 hour intervals with am
and pm. 00:15 (am) is unambiguous, 12:15 am can easily be
misunderstood. 12:00 am and 12:00 pm make no sense and create
confusion.

Only a small proportion of the world's population uses 12 hour notation
with am/pm, 24 hr notation is preferable on the web.

Happy new year :-)
--
Rob

Dec 31 '06 #7
In comp.lang.javas cript message <11************ *********@a3g20 00cwd.goog
legroups.com>, Sat, 30 Dec 2006 14:59:19, ce************@ gmail.com
posted:
>is there a way to display a ticking clock in a web page using
javascript? but not in a textbox, rather as text that i can change the
style, font etc.
<URL:http://www.merlyn.demo n.co.uk/js-date2.htm>
<URL:http://www.merlyn.demo n.co.uk/js-anclk.htm>

It's a good idea to read the newsgroup and its FAQ. See below.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v6.05 IE 6
news:comp.lang. javascript FAQ <URL:http://www.jibbering.c om/faq/index.html>.
<URL:http://www.merlyn.demo n.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.
Dec 31 '06 #8
In comp.lang.javas cript message <459763f0$0$260 5$5a62ac22@per-
qv1-newsreader-01.iinet.net.au >, Sun, 31 Dec 2006 17:17:01, RobG
<rg***@iinet.ne t.auposted:
>pcx99 wrote:
>A more concise function for this case is:

function pad(i){
return (i<10)? '0'+i : ''+i;
}
or

function pad(i) { return (i<10 ? '0' : '') + i }
setTimeout(func tion(){clock.ti ck();}, (1.05 - t.getMillisecon ds()));
}
I think you mean 1050 not 1.05 ; I wonder how that method compares in
efficiency with (1050 - t%1000), and how one could tell.

For anywhere using ISO 8601 time format, something like
new Date().toString ().match(/[\d:]{8}/)
or new Date().toString ().match(/([\d:]{8})/)[1]
or new Date().toString ().match(/\s(\d+:[\d:]+)\s/)[1]
will give hh:mm:ss.

Since the OP wanted a clock, I see no need to provide a calendar
function.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v6.05 IE 6.
Web <URL:http://www.merlyn.demo n.co.uk/- w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demo n.co.uk/programs/- see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.
Jan 1 '07 #9
Lee
Fred wrote:
Lee wrote:
>RobG wrote:
>>I never understood the concept of representing times between midnight
and 1:00 am as 12:xx am.
That's how it's been represented on most analog clocks for centuries.

Which doesn't explain why it should be used with digital clocks based
on 24 hr time, even those that wish to use 12 hour intervals with am
and pm. 00:15 (am) is unambiguous, 12:15 am can easily be
misunderstood.
"12:15 am" cannot easily be misunderstood by anyone who understands
what am and pm mean. "12:00 am" seems to be a problem for people who
have trouble with concept formation.

I personally perfer 24-hour time notation, but if you're going to
use am and pm, the midnight hour is correctly represented as "12".
Jan 1 '07 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
2260
by: Gino Elloso - Philippines | last post by:
Hello, I made a webpage ( @ Geocities Free Webpages ) that contains a mousetrail clock script. I simply copied the script ( including all html tags ) exactly as it was from a source webpage ( that contains only the functioning mousetrail clock ) and pasted it onto mine. But when I try to load the page I made, the clock won't show. Could someone help explain why the clock won't show on my page? Is there a special script for mousetrail...
8
3031
by: Prometheus Research | last post by:
http://newyork.craigslist.org/eng/34043771.html We need a JavaScript component which will auto-submit a form after a set period has elapsed. The component must display a counter that dynamically shows the minutes and seconds remaining before submission. We have a fairly tight deadline (by 5PM EST, Friday, June 25); we are using a "bounty" in the hope of getting a few good responses in a hurry. BOUNTY: $200 for first place, plus a $50...
9
3466
by: ME | last post by:
can someone tell me how to make this first one work??, located here: http://javascript.about.com/library/scripts/blshowdatetime.htm#examplesource This second one, well, dreamweaver eats the code, removes the code as bad. Any help here? Please? 2nd located here: http://www.dynamicdrive.com/dynamicindex6/clock3.htm Appreciated, M.E.
1
1616
by: s.shahzaib.ali | last post by:
I want to make analog clock skin of windows media player so how can i roteate the layer upto 360 degrees with the help of javascript please tell me iam very anxious about it. iam the first and only skinner in Pakistan. i really need your help. Remember Analog clock Using XML LAYER Wit script of java. you just have tell me about java script i can work with xml well! HAVE A NICE DAY GOOD BYE!
0
1120
by: Kamyk | last post by:
Hello all! I have problem with code. Firstly I have created the VBScript code which count me the time and days which left to the end of working week. I work from 8:00 am till 4 pm. I would like to show this information on the screen by using "input form element" and using onload event which is refreshed after every 1 second. Unfortunately I don`t want to replace vbscript code on javascript code to do so. I want to have vbscirpt. Could...
7
1879
by: ian ward | last post by:
Hello, I want to show the result of some JavaScript on an HTML page. I've had a look at some threads and it seems the conclusion is the following - javascript entities are usable on the right-hand side of attribute/value pairs (with some appropriate syntax involving curly brackets and ampersands) and, furthermore, this only works for attributes of "link type" html elements. If this is the case then I'm a bit stuck, but I'd like to...
7
3149
by: Daz | last post by:
Hi everyone. I am trying to find out how I can create a real time clock, which knows when to set itself backwards or forwards 1 hour. The clock will work for various timezones. Some of which will not support DST. If anyone has any suggestions as to how I might be able to achieve this, I would very much appreciate it.
7
5012
Frinavale
by: Frinavale | last post by:
This whole thing started when I wanted to display list items in a circle...it just looked way too much like a clock. So for fun I started to create a JavaScript Analog clock. I was wondering how to draw a line using JavaScript. Everything I've found so far seems to use some JavaScript library....is there an easier way to do this? Here's what I have so far. I know the clock is Side Ways....but when I try to change the angle so that 12 is at...
0
8946
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8774
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9307
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9235
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
4550
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4809
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3261
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2721
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2180
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.