0

非常に鮮明な Raphael-library 世界時計の教育用の例に取り組んでいますが、どこかで何かが欠けています: 時計は静的な値で表示されserverHours、設定されます。serverMinutes以下のコードは表示されません。私が見逃しているものをキャッチする 2 番目 (またはそれ以上) の目のセットに大いに感謝します。ありがとう！

   <!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>
4

1 に答える 1

0

JavaScriptに多くのエラーがあります。Google Chromeでページを開き、F12キーを押して[コンソール]タブに切り替え、赤い色でマークされたすべてのエラーを確認します。

また、すべての場所で#fff塗りつぶし/ストロークの色を使用しているため、白の背景では非表示になります。

また、定義が関数で囲まれている変数「currentHours」などをグローバルに使用しようとしているため、グローバルではなくローカルになります。それをグローバルスコープ（すべての関数の上）に移動します。

于 2012-11-14T06:27:05.133 に答える