前端小白学习——简单时钟
效果演示视频##
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
overflow: hidden;
}
#clock{
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
background-color: pink;
}
</style>
<body>
<canvas id="clock" width="400" height="400"></canvas>
</body>
<script type="text/javascript">
window.onload=function(){
var clock=document.querySelector("#clock");
if(clock.getContext){
var ctx=clock.getContext("2d");
}
setInterval(function(){
ctx.clearRect(0,0,clock.width,clock.height);
move();
},1000)
function move(){
ctx.save();
ctx.translate(200,200);
ctx.rotate(-90*Math.PI/180);
ctx.strokeStyle="black"
ctx.lineWidth=8;
ctx.lineCap="round";
ctx.beginPath();
ctx.save();
ctx.strokeStyle="blue";
ctx.lineWidth=8;
ctx.lineCap="round";
ctx.beginPath();
ctx.arc(0,0,140,0,360*Math.PI/180);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.strokeStyle="black";
ctx.lineWidth=4;
ctx.lineCap="round";
ctx.beginPath();
for(var i=0;i<12;i++){
ctx.rotate(30*Math.PI/180);
ctx.moveTo(100,0);
ctx.lineTo(120,0);
}
ctx.stroke();
ctx.restore();
ctx.save();
ctx.strokeStyle="black";
ctx.lineWidth=4;
ctx.lineCap="round";
ctx.beginPath();
for(var i=0;i<60;i++){
if(i%5!=0){
ctx.moveTo(110,0);
ctx.lineTo(120,0);
}
ctx.rotate(6*Math.PI/180);
}
ctx.stroke();
ctx.restore();
var date=new Date();
var s=date.getSeconds();
var m=date.getMinutes()+s/60;
var h=date.getHours()+m/60;
ctx.save();
ctx.strokeStyle="black";
ctx.lineWidth=10;
ctx.rotate(h*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(-15,0);
ctx.lineTo(65,0);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.strokeStyle="black";
ctx.lineWidth=8;
ctx.rotate(m*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(-15,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.strokeStyle="red";
ctx.lineWidth=6;
ctx.rotate(s*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(-15,0);
ctx.lineTo(85,0);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.fillStyle="red";
ctx.lineWidth=6;
ctx.beginPath();
ctx.arc(0,0,10,0,360*Math.PI/180);
ctx.fill();
ctx.restore();
ctx.restore();
}
}
</script>
</html>