簡單的時鐘與拉斐爾2.1.4

Question

新手在這裏，我有拉斐爾2.1.4一個簡單的時鐘基於教程的一切呈現在頁面上不錯，但處理不轉動。然而它似乎對Raphael 1.5.X起作用。

你能告訴我我做錯了什麼嗎？

碼筆頁附 http://codepen.io/scorpion_rain/pen/dGrmQj

代碼JS： 在window.onload =在瀏覽器中出現錯誤 '不能找到可變hourHand'

的控制檯功能（）{

var cWidth = 800, cHeight = 600; 
var paper = new Raphael(document.getElementById('canvas_container'), cWidth, cHeight); 

var clockBgX = 200, clockBgY = 300, clockBgRadius = 100; 
var cBgCol = '#f5f5f5', cBgStrokeCol = '#444444', cBgStrokeWidth = '5'; 

var centerDialX = clockBgX, centerDialY = clockBgY; 

var hourHandStrokeCol = "#444444", hourHandStrokeWidth = "5"; 
var minuteHandStrokeCol = "#444444", minuteHandStrokeWidth = "3"; 
var secondsHandStrokeCol = "#444444", secondsHandStrokeWidth = "2"; 
var pinDotX = clockBgX, pinDotY = clockBgY, pinDotRadius = 5, pinDotFill = "#000000"; 




// main clock background and number display 
function mainClockBg(){ 

    var clockBg = paper.circle(clockBgX, clockBgY, clockBgRadius);   // outer circle 
     clockBg.attr({ "fill": cBgCol,          // inner background 
         "stroke": cBgStrokeCol, 
         "stroke-width": cBgStrokeWidth }) 

    var radius = Math.PI/180;            // converting from degrees to radian 
    var cx = centerDialX;             // center of dial - horizontal 
    var cy = centerDialY;             // center of dial - vertical 
    var r = 90;               // radius distance 
    var startA = -90;              // start of numbers 
    var angle = 30;               // distance between numbers | 12/360 = 12 stops 
    var x;                 // circle distance inner marker 
    var y;                 // circle distance outer marker 
    var endA;                // end of text 

    // adding numbers to the dial 
    for(i = 1; i < 13; i++){ 

     endA = startA + angle; 
     x = cx + r * Math.cos(endA * radius); 
     y = cy + r * Math.sin(endA * radius); 

     paper.text(x, y, i + ""); 
     startA = endA; 
    } 

} 

function dialsDisplay(){ 

    var hourHand = paper.path("M200, 300L200, 230"); 
     hourHand.attr({ 
      "stroke": hourHandStrokeCol, 
      "stroke-width": hourHandStrokeWidth 
     }); 

    var minuteHand = paper.path("M200, 300L200, 220"); 
     minuteHand.attr({ 
      "stroke": minuteHandStrokeCol, 
      "stroke-width": minuteHandStrokeWidth 
     }) 

    var secondsHand = paper.path("M200, 300L200, 216"); 
     secondsHand.attr({ 
      "stroke": secondsHandStrokeCol, 
      "stroke-width": secondsHandStrokeWidth 
     }) 

    var pinDot = paper.circle(pinDotX, pinDotY, pinDotRadius); 
     pinDot.attr({ 
      "fill": pinDotFill 
     }); 

     updateClock(); 
     setInterval("updateClock()", 1000); 


} 

function updateClock(){ 

    var time = new Date(); 
    var hours = time.getHours(); 
    var minutes = time.getMinutes(); 
    var seconds = time.getSeconds(); 

    hourHand.rotate( 30 * hours + (minutes/2.5), 200, 300 ); 
    minuteHand.rotate(6 * minutes, 200, 300); 
    secondsHand.rotete(6 * seconds, 200, 300); 

} 



mainClockBg(); 
dialsDisplay();  

} 

任何幫助表示讚賞 乾杯。

Answer 1

你在一個函數定義與「變種」的變量，然後在另一個引用它，此項設置範圍。

JavaScript有功能範圍，這樣一個功能不知道在一個範圍內它可以訪問定義，除非它是一個變量。因此，移動函數的小時手，分鐘手，秒。然後updateClock方法將能夠訪問這些變量。

// THIS WONT WORK 
function func1() { 
    var hand = 1; 
} 

function func2() { 
    var test = hand; //hand was declared in other function, so not available here 
} 

因此，嘗試這種形式，而不是

var hand; 
function func1() { 
    hand = 1; 
} 

function func2() { 
    var test = hand; 
} 

而且你會想

setInterval(updateClock, 1000); 

，而不是 的setInterval（ 「updateClock（）」，1000）;

爲setInterval的希望要調用的函數，而不是執行字符串。

然後我猜有一些問題，你將需要調整:)手的運動。

codepen