本文实例为大家分享了js圆形时钟效果的具体代码,供大家参考,具体内容如下
代码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title>时钟& lt;/title>
& lt; style>
*{保证金:0;填充:0;}
div.dd {
保证金:0汽车;
宽度:400 px;
padding-top: 100 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="弟弟"比;
& lt;帆布id=爸印备叨??00 px”宽度=?00 px”在你的浏览器不支持canvas
& lt;/div>
& lt;脚本type=" text/javascript祝辞
(函数(doc) {
var=doc.getElementById(“钟”);
var=can.getContext监狱(2 d);//创建一个2 d上下文
con.translate(200、200);//重新确定坐标原点(确定圆心位置)//外圆
con.beginPath ();
con.fillStyle=? fff”;
con.arc(0, 0, 200, 0,数学。π* 2,假);
con.fill ();//内圆
con.beginPath ();
con.fillStyle=? aaa”;
con.arc(0, 0, 195, 0,数学。π* 2,假);
con.fill ();//绘制刻度
con.beginPath ();
con.font=按蟮?0 px无衬线”;
con.textAlign=爸行摹?
con.textBaseline=爸屑洹?
con.fillStyle=? 000000”;
con.fillText (“12”, 0, -170);
con.fillText(“3”, 170年,0);
con.fillText (“6”, 0170);
con.fillText(-170年“9”,0);
con.fillText(“1”, 84年,-147.224);
con.fillText (“2”, 147.224, -84);
con.fillText (“4”, 147.224, 84);
con.fillText (“5”, 84147 .224);
con.fillText (“7”, -84147 .224);
con.fillText (“8”, -147.224, 84);
con.fillText (“10”, -147.224, -84);
con.fillText(-147.224, -84年“十一”);//获取当前时间
var d=新日期(),时间={};
时间。H=d.getHours () % 12;
时间。M=d.getMinutes ();
时间。S=d.getSeconds ();
函数取得时间(){
围住+ +;
如果时间。年代比;59){
时间。S=0;
time.M + +;
如果时间。米比;60){
时间。M=0;
time.H + +;
如果时间。H比;11){
时间。H=0;
}
}
}
canvasTimeLine ();
}//将角度转为弧度
函数numToDeg (num) {
返回((num * 6 - 90) * 0.0174444444444444);
}//确定刻度位置
度函数computePositionByLenDeg (len) {
返回{
x: len * Math.cos(度),
y: len * sin(度)
}
}//绘制刻度
函数canvasLineMintus () {
我(var=0; i<60;我+ +){
var rec=180;
con.beginPath ();
con.lineWidth=4;
如果(我% 5 !=0){
con.lineWidth=1;
rec=184
}
var beinDeg=numToDeg(我),
beinDeg beginPot=computePositionByLenDeg (rec),
beinDeg endPot=computePositionByLenDeg (190);
con.moveTo (beginPot。x, beginPot.y);
con.lineTo (endPot。x, endPot.y);
con.stroke ();
}
}
函数canvasTimeLine () {
var sDeg=numToDeg(取)
mDeg=numToDeg (time.M),
hDeg=numToDeg(时间。H * 5 + Math.floor (time.M/12)),
点=computePositionByLenDeg(150年,sDeg),
mDeg mPot=computePositionByLenDeg (135),
hDeg hPot=computePositionByLenDeg (110);//时钟表面
con.beginPath ();
con.fillStyle=# ddd的;
con.arc(0, 0, 156, 0,数学。π* 2,假);
con.fill ();//时针
con.beginPath ();
con.moveTo (0,0);
con.lineTo (hPot。x, hPot.y);
con.lineWidth=6;
con.strokeStyle=" # 333”;
con.stroke ();//分针
con.beginPath ();
con.moveTo (0,0);
con.lineTo (mPot。x, mPot.y);
con.lineWidth=4;
con.strokeStyle=" # 333”;
con.stroke ();//秒针
con.beginPath ();
con.moveTo (0,0);
con.lineTo(现货。x, sPot.y);
con.lineWidth=2;
con.strokeStyle=" # ff0000”;
con.stroke ();//针心
con.beginPath ();
con.fillStyle=? aaaaaa”;
con.arc(0, 0 8 0,数学。π* 2,假);
con.fill ();
con.beginPath ();
con.fillStyle=? f00”;
con.arc(0, 0 4 0,数学。π* 2,假);
con.fill ();
}
canvasLineMintus ();
取得时间();
setInterval(取得时间,1000);
})(文档);
& lt;/script>
& lt;/body>
& lt;/html>
更多的JavaScript时钟特效点击查看:JavaScript时钟特效专题
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
