通过一个非常清晰的拉斐尔图书馆世界时钟的教学示例，我在某处遗漏了一些东西：时钟显示serverHours并serverMinutes设置为静态值。下面的代码不显示。非常感谢第二（或更多）眼睛捕捉到我所缺少的东西。谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Multiple Raphael Clocks on Same Page</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript"
function updateClock()
{
var currentTime = new Date();
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
</script>
<body onload="updateClock();">
<div id="clock" style="padding:0px;"></div>
<script type="text/javascript">
cities = [['Houston',-6],['Charleston',-5],['London',0],['Malta',1],['Bucharest',2],['Brisbane',10],['San Diego',-9]];
serverHours = currentHours;
serverMinutes = currentMinutes;
clock24 = false;
</script>
<script type="text/javascript">
function Clock( paper, x, y, offH, offM, title, clock24 )
{
this.paper = paper;
this.centerX = x;
this.centerY = y;
this.offsetHour = offH;
this.offsetMinute = offM;
this.title = title;
this.radius = 14;
this.circle;
this.arrowHour;
this.arrowMinute;
this.clock24 = clock24;
this.Clock = function()
{
this.circle = this.paper.circle(this.centerX, this.centerY, this.radius);
this.circle.attr({"fill": "#fff", "stroke": "#fff"});
this.arrowHour = this.paper.path(
"M" + this.centerX + " " + (this.centerY - this.radius + 6) + " "
+ "L" + this.centerX + " " + this.centerY
);
this.arrowHour.attr({"stroke": "#fff", "stroke-width": "2"});
this.arrowMinute = this.paper.path(
"M" + this.centerX + " " + (this.centerY - this.radius + 2) + " "
+ "L" + this.centerX + " " + this.centerY
);
this.arrowMinute.attr({"stroke": "#fff", "stroke-width": "2"});
var label = this.paper.text(this.centerX, (this.centerY + this.radius + 10), title);
label.attr({"fill" : "#666", "font-size" : "9"});
}
this.showTime = function()
{
var date = new Date();
var hours = date.getHours() + this.offsetHour;
if (hours > 24) hours -= 24;
if (hours < 0) hours += 24;
var dHours = hours;
var dPostfix = "";
var color = (13 - Math.ceil(13.0/144.0 * Math.pow(Math.abs(hours-12), 2))).toString(16);
var minutes = date.getMinutes() + this.offsetMinute;
this.arrowMinute.rotate(minutes*6, this.centerX, this.centerY);
if (hours > 12) hours -= 12;
if (!this.clock24)
{
dPostfix = (dHours >= 12 ? " PM" : " AM");
dHours = hours;
}
this.arrowHour.rotate((parseFloat(hours)+parseFloat(minutes)/60)*30, this.centerX, this.centerY);
if (minutes < 10) minutes = "0" + minutes;
this.circle.attr({"fill": "#"+color+color+color, "stroke": "#"+color+color+color, "title": "" + dHours+":"+minutes+dPostfix});
}
this.Clock();
}
var clock = new Array();
function refreshTime()
{
if (clock)
{
for (var i = 0; i < clock.length; i++)
{
clock[i].showTime();
}
}
}
var paper = Raphael("clock", 330, 60);
var date = new Date();
var offsetHours = serverHours - date.getHours();
var offsetMinutes = serverMinutes - date.getMinutes();
var x = 20;
var y = 21;
for (i = 0; i < cities.length; i++)
{
clock.push(new Clock(paper, x, y, offsetHours + cities[i][1], offsetMinutes, cities[i][0], clock24));
x += 55;
}
refreshTime();
setInterval( "refreshTime()", 30000 );
</script>
</body></html>