Multiple Raphael Clocks on one page，not passing hours/minutes

通过一个非常清脆的拉斐尔图书馆世界时钟的教学示例，我在某处丢失了某些东西：时钟显示为serverHours和serverMinutes设置为静态值。下面的代码不显示。非常感谢第二（或更多）组眼睛捕捉我失踪。谢谢！Multiple Raphael Clocks on one page，not passing hours/minutes

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

来源

2012-11-12 systhink

您在JavaScript中有很多错误。在谷歌浏览器中打开您的页面，按F12，切换到“控制台”选项卡，查看标有红色的所有错误。

此外，您正在使用#fff填充/描边颜色到处都是白色，因此它在白色背景上变得不可见。

此外，你正试图在全球范围内使用变量“currentHours”等定义封装在函数中，所以它变得不全球，但本地。将其移至全局范围（高于所有函数）。

来源

2012-11-14 06:27:05 oyatek

谢谢oyatek！已经离开了另一个任务。这在洗牌中迷了路。将尝试您的建议。 – systhink

@systhink 5年后？真？ :) – oyatek

Multiple Raphael Clocks on one page，not passing hours/minutes

回答

相关问题