Html 制作简易时钟

<!DOCTYPE html>
<html><!--时钟--><div><canvas id="clock" height="500px" width="500px"></canvas><script type="text/javascript" src="1/1.js"></script></div></html>

var dom=document.getElementById('clock');
var ctx=dom.getContext('2d');
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width/2;//设置时钟边框
function setBorder(){ctx.save();ctx.translate(r,r)ctx.beginPath();ctx.lineWidth=10;ctx.arc(0,0,r-5,0,2*Math.PI,false);ctx.stroke();var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];ctx.font='18px Arial';ctx.textAlign='center';ctx.textBaseline='middle';hourNumbers.forEach(function(number,i){var rad=2*Math.PI/12*i;var x=Math.cos(rad)*(r-30);var y=Math.sin(rad)*(r-30);ctx.fillText(number,x,y);});for(var i=0;i<60;i++){var rad=2*Math.PI/60*i;var x=Math.cos(rad)*(r-18);var y=Math.sin(rad)*(r-18);ctx.beginPath();if(i%5==0){ctx.fillStyle='#000';ctx.arc(x,y,2,0,2*Math.PI,false);}else{ctx.fillStyle='#ccc';ctx.arc(x,y,2,0,2*Math.PI,false);}ctx.fill();}
}//设置时
function setHour(hour,minute){ctx.save();ctx.beginPath();var rad=2*Math.PI/12*hour;var mrad=2*Math.PI/12/60*minute;ctx.rotate(rad+mrad);ctx.lineWidth=30;ctx.lineCap='round';ctx.moveTo(0,10);ctx.lineTo(0,-r/2);ctx.stroke();ctx.restore();
}//设置分
function setMinute(minute){ctx.save();ctx.beginPath();var rad=2*Math.PI/60*minute;ctx.rotate(rad);ctx.lineWidth=20;ctx.lineCap='round';ctx.moveTo(0,10);ctx.lineTo(0,-r+30);ctx.stroke();ctx.restore();
}//设置秒
function setSecond(second){ctx.save();ctx.beginPath();ctx.fillStyle='#c14543';var rad=2*Math.PI/60*second;ctx.rotate(rad);ctx.moveTo(-2,20);ctx.lineTo(2,20);ctx.lineTo(1,-r+18);ctx.lineTo(-1,-r+18);ctx.fill();ctx.restore();
}//设置时间点
function setDot(){ctx.beginPath();ctx.fillStyle="#fff";ctx.arc(0,0,3,0,2*Math.PI,false);ctx.fill();
}function setClock(){ctx.clearRect(0,0,width,height);var nowDate =new Date();var hour=nowDate.getHours();var minute=nowDate.getMinutes();var second=nowDate.getSeconds();setBorder();setHour(hour,minute);setMinute(minute);setSecond(second);setDot();ctx.restore();
}
//设置时钟
setClock();
//每秒调用一次
setInterval(setClock,1000);

Html 制作简易时钟相关推荐

前端demo——CSS3制作简易时钟
CSS3制作简易时钟创建整个时钟的容器在容器内分别创建时针.分针.秒针考虑:由于旋转时,默认旋转基点在中间,所以把时针.分针.秒针分别放在一个外层容器中,并对它们的外层容器设置动画效果. htm ...
LVGL8制作简易时钟
通过这两天对LVGL8的部分控件和样式的学习,自己制作了一个简易时钟,可显示时间,日期,星期,用到的主要有样式,布局等对象,还是通过codeblock来模拟代码的运行,代码如下: typedef st ...
html制作简易时钟
新人学习,制作html页面时钟表盘,实现调用时间, CSS部分代码如下 html, body{background-color: #000000; } .fix-center{position: ab ...
原生css+html制作简易时钟
先上效果图 html代码 <div class="clock"><div class=&q ...
php动态模拟时钟,使用canvas制作简易实时动态时钟
动态时钟这几天的工作学习对Canvas产生了很高的兴趣,拿回JS红宝书认真又学了一遍Canvas,恰巧书中例子是画一个小钟,但这个例子非常简易而且没有动画效果,由此产生了制作动态时钟的想法. 如果你 ...
纯css3制作简易钟表时钟
使用css3制作简易钟表效果 html代码 <div class="clock" ><div class="hour ...
24小时切换简易时钟-51单片机
24小时切换简易时钟简介 1.本设计主要介绍用单片机内部的定时/计数器来实现电子时钟的方法,本设计由单片机STC89C51单片机和LED数码管为核心,辅以必要的电路,构成了一个单片机电子时钟. 2. ...
【Proteus仿真】LCD1602+DS1307按键设置简易时钟
[Proteus仿真]LCD1602+DS1307按键设置简易时钟 Proteus仿真演示功能说明通过按键设置当前时间,按键调整时间只实现了对时分秒的设置,年月日以及星期是程序代码写入的,按键不能 ...
运用计算机来动画制作的视频,如何制作一个时钟转动动画视频?电脑制作动画的软件制作时钟转动的小视频的方法...
今天小编要来介绍的是制作动画的软件,可以用于制作时钟转动的动画效果,之前小编就介绍过时钟动画制作的方法,但今天的方法更先进哦,这里的时钟的样式还有颜色都可以自定义的哦.制作动画的软件是什么?不是手机自 ...

Html 制作简易时钟

Html 制作简易时钟相关推荐

最新文章

热门文章