clock

by Richard Hunter

HTML

<div id="clock" class="up"></div>

CSS

#clock {
    
    width : 100px;
    height : 100px;
    background : black;
    display : inline-block;
    border : solid 6px blue;
    box-shadow: 0 0 0 5px black;
}
#clock.up {
    border-left-color : red;
}
#clock.across {
    border-top-color : orange;
}
#clock.down {
    border-right-color : orange;
}
#clock.back {
    border-bottom-color :green;
}

JavaScript

function Clock(selector) {

    this.$clock = $(selector);        
    this.phase = 0;
   

}
Clock.prototype.phases = ['up', 'across', 'down', 'back'];

Clock.prototype.start = function () {

    this.id = window.setInterval((function() {
              
        this.phase = this.phase % 4;
        this.$clock.attr("class", this.phases[this.phase]); 
        this.phase++;
   
    }).bind(this), 100);
}

Clock.prototype.stop = function () {
    window.clearInterval(this.id);
    
};

clock = new Clock('#clock');

clock.start();