Question

While I was looking for an good example of an analog clock implemented only using Javascript I found this interesting clock written by Emanuele Feronato, using a very robust Javascript library called Raphaël

I was playing with it for a while and then I wanted to have multiple clocks with different times on those, maybe according to different timezones but that’s not the case here.

So what I did was create separate clock objects and set different times. It worked but the problem comes when the script hits the setInterval() function, it didn’t really work the clocks’ hands are not rotating.

I’m not so good at Javascript built-in functions and I couldn’t find a solution to prevent this issue, any way I’m posting my code here.

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

        }
 }

For the HTML part I’m creating dynamic clock <div> tags and append all those to one a <div> tag exists on the body of the HTML document.

Thanks.

Answer 1

Please, please don’t use strings with setInterval() ever. That causes scope problems and potentially other problems.

When you use a string, that string is evaluated with eval() at the global scope. As such it has NO access to any of your local variables. There were also a number of other problems, including the fact that you didn’t make update_clock a method of the clock object.

Here’s a working, rewritten and cleaned up version of the code that is much more object oriented and supports several new methods: http://jsfiddle.net/jfriend00/wKVC7/

And, here’s the code:

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;
    }
};
​