h5寫一個時鐘
這個是更改網上貼子的，並非原創。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/02.css" />
<script language="JavaScript">
/*var atime=setInterval(clock,100);
function clock(){
var time=new Date();
atime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
document.getElementById("clock").value=atime;
}*/
var thisObj=function(){
this.canvas=document.getElementById("panel");
this.context=this.canvas.getContext("2d");
this.hour=1;
this.minute=29;
this.second=1;
}
var i=1;
i=window.setInterval(function(){
thisObj.context.clearRect(-200,-100,thisObj.canvas.width,thisObj.canvas.height);
setObjValue();
setObjValue();
drawHour();
drawHourFont();
drawMinute();
drawCenter();
drawClockwise();
drawMinuteHand();
drawSeconds();
setAuthor();
},1000);
function setObjValue(){
if (thisObj.second==60) {
thisObj.second=1;
thisObj.minute=thisObj.minute+1;
}
if (thisObj.minute==60) {
thisObj.minute=1;
thisObj.hour=thisObj.hour+1;
}
thisObj.second=thisObj.second+0.5;
}
function init(){
thisObj=new thisObj();
thisObj.context.translate(200,100);
}
//小時
function drawHour(){
thisObj.context.save();
thisObj.context.strokeStyle="#FF0000";
thisObj.context.beginPath();
thisObj.context.arc(200,150,0,Math.PI*2,false);
thisObj.context.stroke();
thisObj.context.restore();
}
//分鐘
function drawMinute(){
saveAndRestore(function(){
for(var i=0;i<60;i++){
if (i % 5 != 0) {
thisObj.context.beginPath();
thisObj.context.moveTo(145,0);
thisObj.context.lineTo(150,0);
thisObj.context.stroke();
}
thisObj.context.rotate(Math.PI/30);
}
});
}
//設定字
function drawHourFont(){
saveAndRestore(function(){
var j=4;
thisObj.context.lineWidth=4;
for(var i=0;i<12;i++){
thisObj.context.rotate(Math.PI/6);
thisObj.context.beginPath();
thisObj.context.moveTo(140,0);
thisObj.context.lineTo(150,0);
thisObj.context.fillText(j+"點",160,0);
j=(j==12?0:j);
j++;
thisObj.context.stroke();
}
});
}
//圓心
function drawCenter(){
saveAndRestore(function(){
thisObj.context.beginPath();
thisObj.context.arc(0,0,10,0,Math.PI*2, false);
thisObj.context.fill();
});
}
//時針
function drawClockwise(){
saveAndRestore(function(){
thisObj.context.rotate(thisObj.hour*(Math.PI/6));
commHand(0);
})
}
//分針
function drawMinuteHand(){
saveAndRestore(function(){
thisObj.context.rotate(thisObj.minute*(Math.PI/30));
commHand(-30);
});
}
//秒針
function drawSeconds(){
saveAndRestore(function(){
thisObj.context.rotate(thisObj.second*(Math.PI/30));
commHand(-60);
});
}
function commHand(i){
thisObj.context.fillRect(-5, -2, 10, -60 + i);
thisObj.context.fill();
thisObj.context.lineJoin = 'round';
thisObj.context.moveTo(-10, -61+ i);
thisObj.context.lineTo(0, -70+ i);
thisObj.context.lineTo(10, -61+ i);
thisObj.context.lineTo(10, -61+ i);
thisObj.context.lineTo(-10, -61+ i);
thisObj.context.fill();
}
function saveAndRestore(funCall){
thisObj.context.save();
thisObj.context.translate(200,100);
funCall();
thisObj.context.restore();
}
function setAuthor(){
saveAndRestore(function(){
thisObj.context.font = '20px impact';
thisObj.context.fontStyle = '#FF0000';
thisObj.context.fillText('作者：義', 260, 150);
thisObj.context.fillText('2018年8月31日', 260, 180);
thisObj.context.fillText('這個是參照網上的一個帖子抄的',100,200);
thisObj.context.fillText('不過網上是有點小錯誤，這個已經改好了',40,220);
thisObj.context.stroke();
});
}
window.addEventListener("load",init,true);
</script>
</head>
<body>
<form>
<!-- <input type="text" id="clock" size="50"/></form>-->
<div class="myclass">
<canvas id="panel" width="800" height="433"></canvas>
</div>
</body>
</html>
這個是css表
.myclass{
margin: 20px auto;
position: relative;
width: 900px;
}
#panel{
border: 1px solid #CCC;
}
