/    Sign up×
Community /Pin to ProfileBookmark

Javascript live clock with date, time, and time zone

I have scoured the net and found nearly what I’m looking for, but not exactly, and I don’t really know javascript, so trying to piece together bits of code hasn’t worked. What I need is the script for a live clock with date and time format exactly as follows:

Sunday, 07 June 2009, 24:00:00 (GMT+1)

I have two separate files with the following code, which gets me close to what I need: Sun Jun 07 19:05:48 2009 Obviously the time is in the wrong place and it doesn’t show GMT+1. These are the scripts:

[CODE]function update() {
time = Date();
document.getElementById(‘date’).innerHTML = time;
setTimeout(“update()”, 0);
}
update();
[/CODE]

and:

[CODE]document.write(Date());

var rTimer;
var sds ;

TimeTick();

function TimeTick()
{
sds = new Date();
document.time.tfield.value=” “+sds.getHours()+” : “+sds.getMinutes()+” : “+sds.getSeconds();
if(rTimer)
{
clearTimeout(rTimer);
}

rTimer = setTimeout(‘TimeTick()’, 1000);
}
[/CODE]

I would really appreciate help with this. I’m pulling my hair out, as usual.

Many thanks in advance!

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@jalarieSep 18.2010 — Try this:

<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"&gt;
&lt;head&gt;

<i> </i>&lt;title&gt;Clock&lt;/title&gt;

<i> </i>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
<i> </i>&lt;meta http-equiv="Content-Script-Type" content="text/javascript" /&gt;
<i> </i>&lt;meta http-equiv="Content-Style-Type" content="text/css" /&gt;
<i> </i>&lt;meta http-equiv="Content-Language" content="en-US" /&gt;
<i> </i>&lt;meta name="Author" content="James Alarie - [email protected]" /&gt;
<i> </i>&lt;meta name="description" content="This is a live clock." /&gt;
<i> </i>&lt;meta name="keywords" content="live,clock" /&gt;

<i> </i>&lt;link rev="made" href="mailto:[email protected]" /&gt;

&lt;!--
Author: James Alarie
Company: -independent-
Address: 3391 N Genesee Rd
Flint MI 48506
Latitude: 42.9663 Longitude: -83.7769
Telephone: +1-810-736-8259
Fax: -none-
Web Site: http://spruce.flint.umich.edu/~jalarie/
E-Mail: [email protected]
Comments: Having said that, I've probably told you more than I know.
--&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;div id="body"&gt;
&lt;!-- Page Header --&gt;
&lt;div id="header"&gt;
&lt;h1&gt;Clock&lt;/h1&gt;
&lt;hr /&gt;
&lt;/div&gt;

&lt;!-- Content --&gt;
&lt;div id="content"&gt;
&lt;br /&gt;
&lt;noscript&gt;
&lt;p class="notice"&gt;
You must have scripting enabled to make full use of this page.
&lt;/p&gt;
&lt;/noscript&gt;
&lt;div id="TimeDisplay"&gt;&amp;nbsp;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
&lt;!-- Hide this code from non-JavaScript browsers
function NowSplit() {
Now_Y=Now.getYear();
if (Now_Y &lt; 70) { Now_Y=Now_Y*1+2000; }
if (Now_Y &lt; 1000) { Now_Y=Now_Y*1+1900; }
Now_Yf=Now.getFullYear(); // should match Now_Y
Now_M=Now.getMonth(); // Jan-Dec = 0-11
Now_D=Now.getDate(); // 1-31
Now_H=Now.getHours(); // 0-23
Now_N=Now.getMinutes(); // 0-59
Now_S=Now.getSeconds(); // 0-59
Now_U=Now.getMilliseconds(); // 0-999
Now_T=Now.getTime(); // miliseconds since 1970-01-01
Now_O=Now.getTimezoneOffset(); // in minutes
Now_W=GetDay(Now); // weekday: Sun-Sat = 0-6
Now_J= // day of year (Julian day)
Math.round(( // ...account for DST
(new Date(Now_Y,Now_M,Now_D)) // ...most recent midnight
- (new Date(Now_Y,0,0))) // ...Dec. 31st midnight
/86400000); // ...mili-seconds per day

<i> </i> Now_M1=Now_M*1+1; // Jan-Dec = 1-12

<i> </i> Now_A='am';
<i> </i> Now_H12=Now_H;
<i> </i> if (Now_H12 &gt;= 12) {
<i> </i> Now_A='pm';
<i> </i> Now_H12=Now_H12-12;
<i> </i> }
<i> </i> if (Now_H12 == 0) { Now_H12=12; }

<i> </i> if (Now_M &lt; 10) { Now_M='0'+Now_M; } // leading zero?
<i> </i> if (Now_M1 &lt; 10) { Now_M1='0'+Now_M1; }
<i> </i> if (Now_D &lt; 10) { Now_D='0'+Now_D; }
<i> </i> if (Now_H &lt; 10) { Now_H='0'+Now_H; }
<i> </i> if (Now_H12 &lt; 10) { Now_H12='0'+Now_H12; }
<i> </i> if (Now_N &lt; 10) { Now_N='0'+Now_N; }
<i> </i> if (Now_S &lt; 10) { Now_S='0'+Now_S; }
<i> </i> if (Now_U &lt; 10) { Now_U='0'+Now_U; }
<i> </i> if (Now_U &lt; 100) { Now_U='0'+Now_U; }

<i> </i> Month_Names=new Array('January', 'February', 'March', 'April', 'May',
<i> </i> 'June', 'July', 'August','September', 'October', 'November', 'December');
<i> </i> Day_Names=new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday',
<i> </i> 'Thursday', 'Friday', 'Saturday');
<i> </i> Month_Name=Month_Names[Now_M*1];
<i> </i> Day_Name=Day_Names[Now_W];

<i> </i> return true;
<i> </i> } // NowSplit

<i> </i> function GetDay(DA_Year,DA_Month,DA_Date) {
<i> </i> if (!DA_Month) {
<i> </i> DA_Now=new Date(DA_Year);
<i> </i> DA_Year=DA_Now.getYear();
<i> </i> if (DA_Year &lt; 70) { DA_Year=DA_Year*1+2000; }
<i> </i> if (DA_Year &lt; 1000) { DA_Year=DA_Year*1+1900; }
<i> </i> DA_Month=DA_Now.getMonth()+1; // Jan-Dec = 1-12
<i> </i> DA_Date=DA_Now.getDate();
<i> </i> }
<i> </i> DA_Month-=1; // Jan-Dec = 0-11
<i> </i> DA_Offsets=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
<i> </i> if ((DA_Year%400 == 0)
<i> </i> || ((DA_Year%100 != 0) &amp;&amp; (DA_Year%4 == 0))) {
<i> </i> DA_Offsets[1]=29; // leap year: Feb=29 days
<i> </i> }
<i> </i> DA_Work=Math.floor((DA_Year - 1581) *5/4);
<i> </i> for (DA_ix1=1700; DA_ix1&lt; DA_Year; DA_ix1=DA_ix1+100) {
<i> </i> if (DA_ix1%400 != 0) { DA_Work+=6; }
<i> </i> }
<i> </i> DA_Work+=4;
<i> </i> DA_Work=DA_Work%7; // day year begins (Sun-Sat)
<i> </i> for (DA_ix1=0; DA_ix1&lt; DA_Month; DA_ix1++) {
<i> </i> DA_Work+=DA_Offsets[DA_ix1];
<i> </i> }
<i> </i> DA_Work=DA_Work%7; // day month begins
<i> </i> DA_Work+=DA_Date*1-1;
<i> </i> DA_Day=DA_Work%7; // day of target date
<i> </i> return DA_Day;
<i> </i> } // GetDay

<i> </i> function DisplayIt() {
<i> </i> Now=new Date();
<i> </i> NowSplit();
<i> </i> Result ='';
<i> </i> Result+=Day_Name+', '+Now_D+' '+Month_Name+' '+Now_Y;
<i> </i> Result+=', '+Now_H+':'+Now_N+':'+Now_S;
<i> </i> Now_OH=Now_O/60; // minutes to hours;
<i> </i> if (Now_OH &gt;= 0) {
<i> </i> Result+=' (GMT+'+Now_OH+')';
<i> </i> } else {
<i> </i> Now_OH=Now_OH*(-1);
<i> </i> Result+=' (GMY-'+Now_OH+')';
<i> </i> }
<i> </i> if (document.getElementById) {
<i> </i> SL=document.getElementById('TimeDisplay');
<i> </i> SL.innerHTML=Result;
<i> </i> SL_delay=1000; // delay in milliseconds
<i> </i> SL_timeout=setTimeout("DisplayIt();",SL_delay);
<i> </i> }
<i> </i> return true;
<i> </i> } // DisplayIt

<i> </i> // TimeDisplay Sunday, 07 June 2009, 24:00:00 (GMT+1)

<i> </i> DisplayIt();

<i> </i> // End hiding --&gt;
<i> </i> &lt;/script&gt;

<i> </i>&lt;/div&gt;

&lt;!-- Page Footer --&gt;
&lt;div id="footer"&gt;
&lt;br clear="all" /&gt;&lt;hr /&gt;
Written on September 18, 2010, by:&amp;nbsp;
&lt;a href="mailto:[email protected]"&gt;James Alarie&lt;/a&gt;.
&lt;/div&gt;

&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

×

Success!

Help @Webitseo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...