0

Javascript のみを使用して実装されたアナログ時計の良い例を探していたときに、 Raphaëlと呼ばれる非常に堅牢な Javascript ライブラリを使用して、Emanuele Feronato によって書かれたこの興味深い時計を見つけました。

私はしばらくそれをいじっていましたが、おそらく異なるタイムゾーンに応じて、それらの異なる時刻を持つ複数の時計を持ちたいと思っていましたが、ここではそうではありません.

そこで私がしたことは、別々のクロック オブジェクトを作成し、異なる時間を設定することでした。それは機能しましたが、スクリプトが setInterval() 関数にヒットしたときに問題が発生しました。時計の針が回転していないため、実際には機能しませんでした。

私はJavascriptの組み込み関数が苦手で、コードをここに投稿しているにもかかわらず、この問題を防ぐ解決策を見つけることができませんでした.

function createClocks(){
     /* for the time being assume these Date objects are unique */
     var diffDate_01 = new Date();
     var diffDate_02 = new Date();

     /* create separate clock Objects */ 
     var clok_01 = new clock(diffDate_01);
     var clok_01 = new clock(diffDate_02);

     /* calling update_clock function wrapped within setInterval to make the clock's hand rotatable */ 
     setInterval("clok_01.update_clock(diffDate_01)", 1000);
     setInterval("clok_01.update_clock(diffDate_02)", 1000);

}


function clock(diffDate){
        /* this is the place where the base implementation of the clock stands I removed the setInterval("update_clock()",1000); because I want to call it from outside as per Object separately */

        function update_clock(diffDate){
            var now = diffDate;
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            hour_hand.rotate(30*hours+(minutes/2.5), 100, 100);
            minute_hand.rotate(6*minutes, 100, 100);
            second_hand.rotate(6*seconds, 100, 100);

        }
 }

HTML 部分については、動的クロック タグを作成し、それらすべてをHTML ドキュメントの本文に存在するタグ<div>の 1 つに追加します。<div>

ありがとう。

4

2 に答える 2

5

文字列を使用しないでくださいsetInterval()。これにより、スコープの問題が発生し、他の問題が発生する可能性があります。

文字列を使用すると、その文字列はeval()グローバル スコープで評価されます。そのため、ローカル変数にはアクセスできません。update_clock を時計オブジェクトのメソッドにしていないなど、他にもいくつか問題がありました。

これは、よりオブジェクト指向であり、いくつかの新しいメソッドをサポートする、動作し、書き直され、クリーンアップされたバージョンのコードです: http://jsfiddle.net/jfriend00/wKVC7/

コードは次のとおりです。

function clock(id, initialTime) {
    // we store each clock in global map clock.clocks
    // create global clock map if it doesn't already exist
    clock.clocks = clock.clocks || {};
    // store this newly created clock in the map
    clock.clocks[id] = this;
    this.id = id;

    // canvas for this clock (remembered as an instance variable)
    this.canvas = Raphael(id, 200, 200);

    // draw clock face
    var clockFace = this.canvas.circle(100,100,95);
    clockFace.attr({"fill":"#f5f5f5","stroke":"#444444","stroke-width":"5"})  

    // draw clock tick marks
    var start_x, start_y, end_x, end_y;
    for(i=0;i<12;i++){
        start_x = 100+Math.round(80*Math.cos(30*i*Math.PI/180));
        start_y = 100+Math.round(80*Math.sin(30*i*Math.PI/180));
        end_x = 100+Math.round(90*Math.cos(30*i*Math.PI/180));
        end_y = 100+Math.round(90*Math.sin(30*i*Math.PI/180));    
        this.canvas.path("M"+start_x+" "+start_y+"L"+end_x+" "+end_y);
    }

    // draw the three hands (hour, minutes, seconds)
    // save each path as an instance variable
    this.hour_hand = this.canvas.path("M100 100L100 50");
    this.hour_hand.attr({stroke: "#444444", "stroke-width": 6});
    this.minute_hand = this.canvas.path("M100 100L100 40");
    this.minute_hand.attr({stroke: "#444444", "stroke-width": 4});
    this.second_hand = this.canvas.path("M100 110L100 25");
    this.second_hand.attr({stroke: "#444444", "stroke-width": 2}); 

    // draw center pin
    var pin = this.canvas.circle(100, 100, 5);
    pin.attr("fill", "#000000");    

    // update with the actual time
    this.drawTime(initialTime);
 }

clock.prototype = {
    // start the clock running automatically
    start: function() {
        // we have just one global timer running
        // check to see if it is going - if not start it
        if (!clock.timer) {
            clock.timer = setInterval(function() {
                var clocks = clock.clocks;   // get global map
                for (var i in clocks) {
                    if (clocks.hasOwnProperty(i)) {
                        if (clocks[i].running) {
                            clocks[i].update();
                        }
                    }
                }
            }, 1000);
        }
        // if we weren't already running, start this clock
        if (!this.running) {
            var now = new Date();
            this.timeOffset = now - this.currentTime;
            this.update();
            this.running = true;
        }

        return(this);
    },

    // stop the clock
    stop: function() {
        this.running = false;
    },

    destroy: function() {
        this.stop();
        delete clock.clocks[this.id];
    },

    // update the clock according to time of day
    update: function() {
        var now = new Date();
        this.drawTime(new Date(now - this.timeOffset));
    },   

    // update the clock - if no time is passed in, then it will use the current time
    drawTime: function(customDate) {
        var now = customDate || new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        this.hour_hand.rotate(30*hours+(minutes/2.5), 100, 100);
        this.minute_hand.rotate(6*minutes, 100, 100);
        this.second_hand.rotate(6*seconds, 100, 100);
        this.currentTime = now;
    }
};
​
于 2012-08-18T17:11:13.253 に答える
0

diffDate間違った方法で通過しているため、これは機能しません。

実際に変数を渡すには、これを使用します。

var update_clock=(function (diffDate)
    {return function{
        var now = diffDate;
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        hour_hand.rotate(30*hours+(minutes/2.5), 100, 100);
        minute_hand.rotate(6*minutes, 100, 100);
        second_hand.rotate(6*seconds, 100, 100);

    }
})(diffDate);

次に、次のように呼び出すことができます。

window.setInterval(update_clock,1000)
于 2012-08-18T17:14:24.970 に答える