时钟实例：

实例代码：

----------------------------------------------------------

     
         
      
         
       
          
        
           
         
            
          
             
           时钟  
             
           
            
            
             
             
              
               
                
                
                 
                  
                   
                    
                     
                      旋转
                      
                       /*@descrition 时钟和时区@date:2015-08-01 23:66@author:keke知识点:a:javascript 闭包 b:css3圆心和旋转c:border-radiusd:定位position辅助知识点：Date类实现步骤:1:如果画圆2:如果产生时分秒针4:如果产生刻度5:如何让时分秒针进行旋转6:时区时间的计算7:如何封装新的知识点:一个表盘360度,分了60个格子，每个格子就是6度每个五个格子就是一个小时:30度=1小时*//** * 对Date的扩展，将 Date 转化为指定格式的String 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) * 可以用 1-2 个占位符 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) eg: (new * Date()).format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 (new * Date()).format("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04 (new * Date()).format("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04 (new * Date()).format("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04 (new * Date()).format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 */Date.prototype.format = function(fmt) {var o = {"Y+" : this.getFullYear(),"M+" : this.getMonth() + 1,// 月份"d+" : this.getDate(),// 日"h+" : this.getHours() % 12 == 0 ? 12 : this.getHours() % 12,// 小时"H+" : this.getHours(),// 小时"m+" : this.getMinutes(),// 分"s+" : this.getSeconds(),// 秒"q+" : Math.floor((this.getMonth() + 3) / 3),// 季度"S" : this.getMilliseconds()// 毫秒};var week = {"0" : "/u65e5","1" : "/u4e00","2" : "/u4e8c","3" : "/u4e09","4" : "/u56db","5" : "/u4e94","6" : "/u516d"};if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));}if (/(E+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1,((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f": "/u5468"): "")+ week[this.getDay() + ""]);}for ( var k in o) {if (new RegExp("(" + k + ")").test(fmt)) {fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]): (("00" + o[k]).substr(("" + o[k]).length)));}}return fmt;};//时区的换算 offset时区位置function calcTime(offset) { // 创建一个本地日期var d = new Date(); //通过Data()对象的getTimezoneOffset()方法来找出当地时间偏移值。在缺省情况下，此方法以分钟显示时区偏移值结果，因此在早先的计算中要将此值转换成毫秒。 var utc = d.getTime() + (d.getTimezoneOffset() * 60000); //将本地时间与本地时区偏移值相加得到当前国际标准时间（UTC）。 var nd = new Date(utc + (3600000*offset)); return nd;};(function(){//刻度对象var keduDom = document.getElementById("kedu");//产生刻度值var html = "";for(var i=0;i<60;i++){html += "
                       
                        ";};keduDom.innerHTML = html;//时分秒针var secDom = $("sec");//1-60var minDom = $("min");//1-60var hourDom = $("hour");//1-12 每个五个格子就是一个小时:30度=1小时var timerDom = $("timer");//北京时间var timer2Dom = $("timer2");//var timer3Dom = $("timer3");function drawDate(){var date = new Date();//秒var sec = date.getSeconds();//分var min = date.getMinutes()+sec/60;//时var hour = date.getHours() + min/60;secDom.style.transform = "rotate("+(sec * 6)+"deg)";minDom.style.transform = "rotate("+(min * 6)+"deg)";hourDom.style.transform = "rotate("+(hour * 30)+"deg)";//时间的设定timerDom.innerText = "北京时间:"+date.format("HH:mm:ss");timer2Dom.innerText = "夏威夷时间:"+calcTime("-10").format("yyyy-MM-dd HH:mm:ss");timer3Dom.innerText = "莫斯科时间:"+calcTime("+5.5").format("yyyy-MM-dd HH:mm:ss");};//初始化当前时间的位置drawDate();//定时任务执行时钟setInterval(drawDate,1000);function $(id){return document.getElementById(id);}})(); 

-------------------

所需time.js

-------------------------------

// JavaScript Documentfunction Dtime(){ctx.clearRect(0,0,500,500);var now=new Date();var h=now.getHours();var m=now.getMinutes();var s=now.getSeconds();//自定义颜色//创建线性渐变var gradient=ctx.createLinearGradient(0,0,500,500);gradient.addColorStop("0","#FFF");gradient.addColorStop("0.5","#CCC");gradient.addColorStop("1.0","#FFF");//笔触面积ctx.lineWidth=50;//把自定义颜色赋给笔迹ctx.strokeStyle=gradient;//绘制表盘ctx.beginPath();//开始下笔//圆形ctx.arc(250,250,210,0,360*Math.PI/180);ctx.stroke();ctx.closePath();//结束下笔//绘制表盘 end//时刻度//换笔ctx.lineWidth=7;ctx.strokeStyle="#000";for(var i=0;i<12;i++){ctx.save();//把坐标点（250.250）置为原点ctx.translate(250,250);ctx.beginPath();//旋转角度ctx.rotate(i*30*Math.PI/180);//花直线ctx.moveTo(0,-160);ctx.lineTo(0,-185);ctx.stroke();ctx.closePath();ctx.restore();}//时刻度 end//分刻度ctx.lineWidth=3;for(var i=0;i<60;i++){ctx.save();ctx.translate(250,250);ctx.beginPath();ctx.rotate(i*6*Math.PI/180);ctx.moveTo(0,-170);ctx.lineTo(0,-185);ctx.stroke();ctx.closePath();ctx.restore();}//时针ctx.save();ctx.lineWidth=7;ctx.translate(250,250);ctx.rotate(h*30*Math.PI/180);ctx.beginPath();ctx.moveTo(0,-140);ctx.lineTo(0,10);ctx.stroke();ctx.closePath();ctx.restore();//分针ctx.save();ctx.lineWidth=5;ctx.translate(250,250);ctx.rotate(m*6*Math.PI/180);ctx.beginPath();ctx.moveTo(0,-150);ctx.lineTo(0,15);ctx.stroke();ctx.closePath();ctx.restore();//秒针ctx.save();ctx.lineWidth=3;ctx.strokeStyle="red";ctx.translate(250,250);ctx.rotate(s*6*Math.PI/180);ctx.beginPath();ctx.moveTo(0,-150);ctx.lineTo(0,15);ctx.stroke();ctx.closePath();ctx.restore();}setInterval(Dtime,1000);