JS画图之七【时钟】

样例：http://www.zhaojz.com.cn/demo/draw12.html

依赖：圆

一、定义对象：针

        //定义钟表指针
        //dotClock    原点
        //len    指针长度
        function ClockHand(dotClock, len, opts){
            this.points = [];
            this.dotClock = dotClock;
            this.len = len;
            this.currentAngle = opts.angle?(270+opts.angle):270; //偏移角
            this.drawed = false;
            this.type = opts.type?opts.type:""; //指针类型，分时针、分针和秒针
            this.color = opts.color?opts.color:"DarkRed"; //指针颜色
            this.weight = opts.weight?opts.weight:1; //指针宽度
        }
        //绘制指针
        ClockHand.prototype.draw = function(){
            if(!this.drawed){
                var rad = this.currentAngle*Math.PI/180; //计算弧度
                this.points = getLine(this.dotClock, [this.dotClock[0]+this.len*Math.cos(rad), this.dotClock[1]+this.len*Math.sin(rad)]
                    ,{
                    color: this.color,
                    pw: this.weight,
                    ph: this.weight
                });
                var i = 0;
                while(i < this.points.length){
                    document.body.appendChild(this.points[i]);
                    i++;
                }
                this.drawed = true;
            }
        }
        //擦除指针
        ClockHand.prototype._erase_ = function(){
            if(this.drawed){
                var i = 0;
                while(i < this.points.length){
                    document.body.removeChild(this.points[i]);
                    i++;
                }
                this.points = [];
                this.drawed = false;
            }
        }
        

二、定义对象：钟

        //定义钟表
        function Clock(dot, r){
            this.cid = new Date().getTime(); //唯一标识
            this.dot = dot;  //原点
            this.r = r;  //半径
            if(!window.myClock){
                window.myClock = {};
            }
            window.myClock[this.cid+""] = this; //保存引用
        }
        //初始化，画表盘、刻度和指针
        Clock.prototype.init = function(){
            drawCircle(this.dot, this.r, 1);
            var d = new Date();
            var hour = d.getHours();
            var minute = d.getMinutes();
            var second = d.getSeconds();
            this.hourHand = new ClockHand(this.dot, this.r*0.5, {type:"HOUR",color:"BLACK",weight: 2, angle: (hour%12*(360/12)+minute*(360/(12*60))+second*(360/(12*60*60)))});
            this.minuteHand = new ClockHand(this.dot, this.r*0.89, {type:"MIN",color:"DarkRed",weight: 2, angle: (minute*(360/60)+second*(360/(60*60)))});
            this.secondHand = new ClockHand(this.dot, this.r*0.91, {type:"SEC",color:"RED",weight: 1, angle: (second*(360/60))});
            this.hourHand.draw();
            this.minuteHand.draw();
            this.secondHand.draw();
            return this;
        }
        //开始走时
        Clock.prototype.start = function(){
            setInterval("myClock['"+this.cid+"']._running_();",1000);
        }
        
        Clock.prototype._running_ = function(){

　　　　　　　　this.secondHand._erase_();
　　　　　　　　this.minuteHand._erase_();
　　　　　　　　this.minuteHand._erase_();
　　　　　　　　this.init();

        }

三、调用

        //半径
        var r= 100;// 原点
        var dot2 = [200, 200];
    
        new Clock(dot2, r).init().start();

PS：上述脚本所依赖的其它方法，可以通过查看网页源代码以及下载页面所引用的js文件获得。

转载于:https://www.cnblogs.com/zhaojz/p/4285395.html