/    Sign up×
Community /Pin to ProfileBookmark

I’ve got a clock that updates the time every second and works like a charm, but in some browsers (Firefox 1.x) all the text flashes instead of just what needs to be changed. Any ideas on how to fix? Thanks!

Javascript in external file:

[CODE]
function cmdClock(){
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth()
var day = date.getDate()
var weekday = date.getDay()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
var AMPM = “AM”
minute = cmdLessThanTen(minute)
second = cmdLessThanTen(second)
month = cmdMonth(month)
weekday = cmdWeekday(weekday)
if(hour>11&&hour<24){
AMPM = “PM”
}
if(hour>12){
hour = hour – 12
}
document.getElementById(“DynamicClock”).innerHTML = “It’s ” + hour + “:” + minute + “:” + second + ” ” + AMPM + ” on<br/>” + weekday + “, ” + month + ” ” + day + “, ” + year
t=setTimeout(‘cmdClock()’,1000)
}
function cmdLessThanTen(i){
if (i<10){
i = “0” + i
}
return i
}
function cmdMonth(m){
switch(m){
case 0:
m = “January”
break
case 1:
m = “February”
break
case 2:
m = “March”
break
case 3:
m = “April”
break
case 4:
m = “May”
break
case 5:
m = “June”
break
case 6:
m = “July”
break
case 7:
m = “August”
break
case 8:
m = “September”
break
case 9:
m = “October”
break
case 10:
m = “November”
break
case 11:
m = “December”
break
}
return m
}
function cmdWeekday(w){
switch(w){
case 0:
w = “Sunday”
break
case 1:
w = “Monday”
break
case 2:
w = “Tuesday”
break
case 3:
w = “Wednesday”
break
case 4:
w = “Thursday”
break
case 5:
w = “Friday”
break
case 6:
w = “Saturday”
break
}
return w
}
[/CODE]

HTML:

[CODE]
<div id=”DynamicClock”></div>
[/CODE]

to post a comment
JavaScript

8 Comments(s)

Copy linkTweet thisAlerts:
@spelgerSep 08.2007 — i am a javascript newbie, but i'll toss in my hat...you might try breaking up the problem into smaller pieces. update only that part than needs updating.

that might mean that your element "DynamicClock" becomes "DynamicHour" and "DynamicMinute" and...

or you store the time as a global and compare what was and what is and update what needs updating all in one function. i think you would still need separate elements to do this though.

it is more complex than what you are doing for sure but...just a thought.

scott
Copy linkTweet thisAlerts:
@nbcrockettauthorSep 08.2007 — That's a possible idea, but unfortunately I need a quicker fix. I'm going live with this new site tomorrow night and I still have alot to do. Any other ideas?
Copy linkTweet thisAlerts:
@Declan1991Sep 08.2007 — Something like
[code=html]
<span id="hour"></span>
[/code]

[code=php]
if (document.getElementById('hour').innerHTML != hour) {
document.getElementById('hour').innerHTML = hour;
}
[/code]
Copy linkTweet thisAlerts:
@nbcrockettauthorSep 08.2007 — Thanks! I actually was just trying that and it works. Changing it from a div to a span fixed the whole problem.
Copy linkTweet thisAlerts:
@JMRKERSep 08.2007 — Just looking at you code.

Here are some suggested changes to improve efficiency.

No functional difference from your original script.

Use or ignore ... your choice. ?

[code=php]
<html>
<head>
<title>Flashing Clock</title>
<script type="text/javascript">

cmdMonthArray =
new Array('January','February','March','April','May','June',
'July','August','September','October','November','December');
cmdWeekdayArray =
new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

function cmdClock() {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes(); minute = cmdLessThanTen(minute);
var second = date.getSeconds(); second = cmdLessThanTen(second);
var AMPM = "AM"; if(hour>11 && hour<24) { AMPM = "PM"; }
if(hour>12) { hour = hour - 12; }

document.getElementById('hour').innerHTML = hour;
document.getElementById('minute').innerHTML = minute;
document.getElementById('second').innerHTML = second;
document.getElementById('AMPM').innerHTML = AMPM;
document.getElementById('weekday').innerHTML = cmdWeekdayArray[date.getDay()];
document.getElementById('month').innerHTML = cmdMonthArray[date.getMonth()];
document.getElementById('day').innerHTML = date.getDate();
document.getElementById('year').innerHTML = date.getFullYear();

t=setTimeout('cmdClock()',1000);
}
function cmdLessThanTen(i) {
if (i<10) { i = "0" + i; }
return i;
}

</script>
</head>
<body onLoad="cmdClock()">
<div id="DynamicClock">
It's <span id="hour">hour</span>:<span id="minute">minute</span>:<span id="second">second</span>
<span id="AMPM">AMPM</span>
on<br/><span id="weekday">weekday</span>, <span id="month">month</span>
<span id="day">day</span>, <span id="year">year</span>
</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@Declan1991Sep 08.2007 — Also, you could change
[code=php]
if(hour>12) { hour = hour - 12; }
[/code]

to [code=php]
hour%=12;
[/code]

or [code=php]
hour=(hour>12)?hour-12:hour;
[/code]
Copy linkTweet thisAlerts:
@nbcrockettauthorSep 08.2007 — Thanks for your help guys! I think I've found the solution I'm looking for. Here's my final code.

External Javascript:
[CODE]
cmdMonthArray = new Array('January','February','March','April','May','June',
'July','August','September','October','November','December');
cmdWeekdayArray = new Array('Sunday','Monday','Tuesday','Wednesday',
'Thursday','Friday','Saturday');
function cmdClock(){
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
minute = cmdLessThanTen(minute);
var second = date.getSeconds();
second = cmdLessThanTen(second);
var AMPM = "AM";
if(hour>11 && hour<24){
AMPM = "PM";
}
if(hour>12){
hour = hour - 12;
}

document.getElementById("DynamicClock1").innerHTML = "It's " + hour + ":" + minute + ":" + second + " " + AMPM + " on<br/>" + cmdWeekdayArray[date.getDay()] + ", " + cmdMonthArray[date.getMonth()] + " " + date.getDate() + ", " + date.getFullYear();

t=setTimeout('cmdClock()',1000);
}
function cmdLessThanTen(i){
if (i<10){
i = "0" + i;
}
return i;
}
[/CODE]


HTML:
[CODE]
<span id="DynamicClock1"><br/></span>
[/CODE]


I put all of the text and the output returned by the javascript into one span. If I didn't you would be able to see this before the clock script loaded.

It's : : on
[/QUOTE]
Copy linkTweet thisAlerts:
@Declan1991Sep 08.2007 — BTW you should put a space before "/>" so that it is as compatible as possible.
×

Success!

Help @nbcrockett 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 4.20,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

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