用面向对象思想写钟表

首先是要先理解面向对象这一编程思想，我自己的理解是把一些属性或方法先归成一个对象，在我们需要的时候直接调用这个对象。
用prototype和构造函数同时用，解决了要去重复的创建相同的方法。 

用js写钟表
首先得先创建一个div，命名为id=“aaa”放表

function clock(size,panBorderWidth){
        this.size=size||400;
        this.pan;
        this.panBorderWidth=panBorderWidth||3;
        this.sp;
        this.mp;
        this.hp;
    }
    clock.prototype={
        init:function(){

            this.makepan();
            this.makeKeDu();
            this.makeSp();
            this.makeMp();
            this.makeHp();
            this.moveP();

        },
        //制作表盘的方法
        makepan:function(){
          this.pan=$("<div>").css({

                width:this.size,
                height:this.size,
                borderRadius:"50%",
                border:this.panBorderWidth+"px solid #333",
                background:"#a5cbff",
                position:"relative"
            }).appendTo($("#aaa"));
            $("<div>").css({
                width:"20px",
                height:"20px",
                background:"#333",
                borderRadius:"50%",
                position:"absolute",
                left:0,
                top:0,
                right:0,
                bottom:0,
                zIndex:1000,
                margin:"auto"
            }).appendTo(this.pan)
        },
        //创建刻度的方法
        makeKeDu:function(){
            var w,h;
            //每格5分会比较长
           for(var i =0;i<60;i++){
               if(i%5==0){
                   w=3;
                   h=15;
               }else{
               //其余的刻度
                   w=1;
                   h=10;
               }
               //刻度的样式
               var sp=$("<span>").css({
                   display:"block",
                   width:w+"px",
                   height:h+"px",
                   background:"#333",
                   position:"absolute",
                   left:0,
                   right:0,
                   margin:"0 auto",
                   transformOrigin:"center 200px",
                   transform:"rotate("+(6*i)+"deg)"
               }).appendTo(this.pan)
           }
        },
        //制作秒针
        makeSp:function(){
            this.sp=$("<div>").css({
                width:"1px",
                height:"180px",
                background:"red",
                position:"absolute",
                left:0,
                right:0,
                top:20,
                margin:"0 auto",
                transformOrigin:"center bottom"
            }).appendTo(this.pan)
        },
        //指针的旋转
        moveP:function(){
            var that=this;
            setInterval(function(){
                var date=new Date;
                var s=date.getSeconds();
                var m=date.getMinutes();
                var h=date.getHours();
                that.sp.css({
                //秒针每秒转6度
                    transform:"rotate("+(s*6)+"deg)"
                });
                //分针：1m=60s，m/6=s/60
                that.mp.css({
                    transform:"rotate("+((m*6)+(s*0.1))+"deg)"
                });
//时针： s/3600=h/5 h=6/720
                that.hp.css({
                    transform:"rotate("+((h*30)+(m*0.5)+(s*(6/720)))+"deg)"
                })
            })
        },
        //制作分针
        makeMp:function(){
            this.mp=$("<div>").css({
                width:"4px",
                height:"140px",
                background:"yellow",
                position:"absolute",
                left:0,
                right:0,
                top:60,
                margin:"0 auto",
                transformOrigin:"center bottom"
            }).appendTo(this.pan)
        },
       // 制作时针
        makeHp:function(){
            this.hp=$("<div>").css({
                width:"6px",
                height:"100px",
                background:"#333",
                position:"absolute",
                left:0,
                right:0,
                top:100,
                margin:"0 auto",
                transformOrigin:"center bottom"
            }).appendTo(this.pan)
        }
    }
//创建对象
   var clock1=new clock();
   //调用
   clock1.init();
    var clock2=new clock();
   clock2.init();

用carvas画布画表
先创建一个carvas画布

<canvas id="myCanvas" ></canvas>

再在script标签内画表，原理同js的方式一样
carvas对象的方法最好要写在 this.c.beginPath();和this.c.closePath();之间，把要画的东西写在一个封闭的路径里，再写在this.c.save();和this.c.restore();之间，避免对其他造成影响。

function clock(size){
            this.canvas=document.getElementById("myCanvas");
            this.size=size||400;
            //获取carvas对象的方法
            this.c=this.canvas.getContext("2d");
            this.panW=3;
            this.panC="yellow";
            this.panCC="green";
        }
        clock.prototype={
            init:function(){
                this.canvas.width=this.size;
                this.canvas.height=this.size;
                this.makePan();
                this.makeKedu();
                this.movea()
            },
            makePan:function(){
                this.c.save();
                this.c.beginPath();
                this.c.lineWidth=this.panW.toString();
                this.c.fillStyle=this.panC;
                this.c.strokeStyle=this.panCC;
                             this.c.arc(this.size/2,this.size/2,this.size/2-this.panW,0,Math.PI*2)
                this.c.closePath();
                this.c.fill();
                this.c.stroke();
                this.c.restore();
            },
            makeKedu:function(){
                for (var i=0;i<60;i++ ) {
                    if(i%5==0){
                        this.c.save();
                        this.c.beginPath();
                        this.c.translate(this.size/2, this.size/2)
                        this.c.rotate(i*Math.PI/30);
                        this.c.lineWidth="3"
                        this.c.moveTo(this.size/2-30,0);
                        this.c.lineTo(this.size/2-this.panW,0);
                        this.c.closePath();
                        this.c.stroke();
                        this.c.restore();
                    }else{
                        this.c.save();
                        this.c.beginPath();
                        this.c.translate(this.size/2, this.size/2)
                        this.c.rotate(i*Math.PI/30);
                        this.c.lineWidth="3"
                        this.c.moveTo(this.size/2-20,0);
                        this.c.lineTo(this.size/2-this.panW,0);
                        this.c.closePath();
                        this.c.stroke()
                        this.c.restore();
                    }
                }
            },
            movea: function(){
                this.moveb();
                var that=this;
                setInterval(function(){
                    that.moveb()
                },1000)
            },
            moveb: function(){
                this.c.clearRect(0,0,this.size,this.size)
                this.makePan();
                this.makeKedu()
                var date=new Date();
                var p=Math.PI;
                var s=date.getSeconds();
                var m=date.getMinutes();
                var h=date.getHours();                  
                  // alert(s+"'"+m+","+h)   

                    this.c.save();
                    this.c.beginPath();
                    this.c.translate(this.size/2,this.size/2)
                    this.c.rotate(s*p/30)
                    this.c.strokeStyle="red"
                    this.c.moveTo(0,0);
                    this.c.lineTo(0,-this.size/2+40);
                    this.c.closePath();
                    this.c.stroke();
                    this.c.restore();

                    this.c.save();
                    this.c.beginPath();
                    this.c.translate(this.size/2,this.size/2)
                    this.c.rotate((m*p/30)+(s*p/1800))
                    this.c.strokeStyle="blue"
                    this.c.moveTo(0,0);
                    this.c.lineTo(0,-this.size/2+70);
                    this.c.closePath();
                    this.c.stroke();
                    this.c.restore();

                    this.c.save();
                    this.c.beginPath();
                    this.c.translate(this.size/2,this.size/2)
                    this.c.rotate((h*p/6)+(m*p/360)+(s*p/21600))
                    this.c.strokeStyle="green"
                    this.c.moveTo(0,0);
                    this.c.lineTo(0,-this.size/2+30);
                    this.c.closePath();
                    this.c.stroke();
                    this.c.restore();

            },
            //用carvas来设置怎样保存图片  
            saveIn:function(){      window.open(this.canvas.toDataURL("image/png"),"smallwin")
            }
        }
        var biao=new clock(500);
        biao.init()

        inp.onclick=function(){
            biao.saveIn()
        }