Question

新手在这里，我有一个简单的时钟与Raphael 2.1.4基于教程在页面上呈现的一切都很好，但句柄不旋转。然而它似乎适用于Raphael 1.5.X。

你能告诉我我做错了什么吗？

附加代码笔页 http://codepen.io/scorpion_rain/pen/dGrmQj

代码JS： window.onload = function（）{

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();    

}

在浏览器的控制台中我收到错误＆＃39;无法找到变量hourHand＆＃39;

任何帮助表示赞赏欢呼声。

Answer 1

您正在使用＆＃39; var＆＃39;来定义变量。在一个函数中，然后在另一个函数中引用它，这将设置范围。

Javascript具有功能范围，因此一个函数不知道变量，除非它在可以访问的范围内定义。因此，在函数外部移动hourHand，minuteHand，secondsHand。然后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（＆＃34; updateClock（）＆＃34;，1000）;

因为setInterval想要一个函数来调用，而不是要执行的字符串。

然后我猜测你需要调整的手的移动存在一些问题：）。

codepen

简单时钟与拉斐尔2.1.4

1 个答案: