Question

通过一个非常清晰的拉斐尔图书馆世界时钟的教学示例，我在某处丢失了某些内容：时钟以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>

Answer 1

您的JavaScript中有很多错误。在Google Chrome中打开您的页面，按F12，切换到“控制台”标签，然后查看标有红色的所有错误。

此外，您在任何地方都使用#fff填充/描边颜色，这是白色的，因此在白色背景上变得不可见。

此外，您正尝试全局使用变量“currentHours”等，其定义包含在函数中，因此它不是全局的而是本地的。将其移至全局范围（在所有函数之上）。

一页上有多个拉斐尔时钟，而不是小时/分钟

1 个答案: