canvas 绘制时钟 ……
相当的困难
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>clock</title>
<style>
.sz{ background:white;
border:1px solid gray;
border-radius:50%;
width:200px;
height:200px;
position:relative;}
.hours{ position:absolute;
width:6px;
height:40px;
background-color:#000;
left:97px; bottom:100px;
transform-origin:bottom}
.minutes{ position:absolute;
width:4px;
height:50px;
background-color:#6CF;
left:98px;
bottom:100px;
transform-origin:bottom}
.seconds{ position:absolute;
width:2px;
height:70px;
background-color:#F66;
left:99px;
bottom:100px;
transform-origin:bottom}
.one{ height:20px;
width:5px;
position:absolute;
background-color:#633;
left:97.5px;}
.two{ height:20px;
width:5px;
position:absolute;
background-color:#633;
left:97.5px;
top:180px;}
.three{ width:20px;
height:5px;
position:absolute;
background-color:#633;
left:0;
top:97.5px;}
.four{ width:20px;
height:5px;
position:absolute;
background-color:#633;
left:180px;
top:97.5px;}
</style>
</head>
<body>
<p id="pid"></p>
<div class="sz">
<div class="szup">
<div id="hours" class="hours"></div>
<div id="minutes" class="minutes"></div>
<div id="seconds" class="seconds"></div>
</div>
<div class="szdown">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</div>
</body>
</html>
<script>
var colck=setInterval("Time()",100);
function Time(){
var mytime=new Date;
var h=mytime.getHours();
var m=mytime.getMinutes();
var s=mytime.getSeconds();
var m=math(m);
var s=math(s);
document.getElementById("pid").innerHTML=h+":"+m+":"+s;
}
function math(i){
if(i<10){
i="0"+i;
}
return i;
}
var yuanColck=setInterval("shizhen()",100);
function shizhen(){
var mytime=new Date;
var h=mytime.getHours();
var m=mytime.getMinutes();
var s=mytime.getSeconds();
var hh=document.getElementById("hours");
var mm=document.getElementById("minutes");
var ss=document.getElementById("seconds");
var hds=hdeg(h,m);
var mds=mdeg(m);
var sds=mdeg(s);
hh.style.transform='rotate(' + hds + 'deg)';
mm.style.transform='rotate(' + mds + 'deg)';
ss.style.transform='rotate(' + sds + 'deg)';
hh.style.webkitTransform='rotate(' + hds + 'deg)';
mm.style.webkitTransform='rotate(' + mds + 'deg)';
ss.style.webkitTransform='rotate(' + sds + 'deg)';
hh.style.mozkitTransform='rotate(' + hds + 'deg)';
mm.style.mozkitTransform='rotate(' + mds + 'deg)';
ss.style.mozkitTransform='rotate(' + sds + 'deg)';
hh.style.oTransform='rotate(' + hds + 'deg)';
mm.style.oTransform='rotate(' + mds + 'deg)';
ss.style.oTransform='rotate(' + sds + 'deg)';
}
function hdeg(i,j){
if(i<12){
i=i
}else{
i=i-12;
}
i=i*30;
j=(j/60)*30;
return i+j;
}
function mdeg(i){
i=i*6;
return i;
}
</script>
