时钟和时区

时间：2022-04-27 12:36

时钟实例：

实例代码：

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

旋转 /* @descrition 时钟和时区 @date:2015-08-01 23:66 @author:keke 知识点: a:javascript 闭包 b:css3圆心和旋转 c:border-radius d:定位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-60 var minDom = $("min");//1-60 var 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 Document
function 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);

本文出自 “” 博客，请务必保留此出处