标签：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>时钟</title>
<!--另外一个时钟-->
<script language="JavaScript">
var H = ‘.....‘;
var H = H.split("");
var M = "....";
var M = M.split("");
var S = "....";
var S = S.split("");
var Ypos = 0;
var Xpos = 0;
var Ybase = 8;
var Xbase = 8;
var dots = 12;
function clock1(){
var time = new Date();
var secs = time.getSeconds();
var seco = 1.57 + Math.PI*secs/30;
var mins = time.getMinutes();
var min = 1.57 + Math.PI*mins/30;
var hrs = time.getHours();
var hr = 1.57 + Math.PI*hrs/6 + Math.PI*parseInt(time.getMinutes())/360;
for(var i = 0;i < dots;++i){
document.getElementById("dig" + (i+1)).style.top = 0-15 + 40 * Math.sin(-0.49 + dots + i/1.9).toString() + "px";
document.getElementById("dig" + (i+1)).style.left = 0-14 + 40 * Math.cos(-0.49 + dots+ i/1.9).toString() + "px";
}
for(var i = 0;i< S.length;++i){
document.getElementById("sec" + ( i + 1)).style.top = Ypos + i * Ybase + Math.sin(secs).toString() + "px";
document.getElementById("sec" + ( i + 1)).style.left = Xpos + i* Xbase; + Math.cos(secs).toString() + "px"
}
for(var i = 0;i < M.length;i++){
document.getElementById("min" + (i + 1)).style.top = Ypos + i * Ybase + Math.sin(min).toString() + "px";
document.getElementById("min" + (i + 1)).style.left = Xpos + i * Xbase + Math.cos(min).toString() + "px";
}
for(i = 0;i < H.length;i++){
document.getElementById("hour" + (i + 1)).style.top = Ypos + Ybase * i + Math.sin(hrs).toString() + "px";
document.getElementById("hour" + (i + 1)).style.top = Ypos + Ybase * i + Math.sin(hrs).toString() + "px";
}
setTimeout(‘clock1()‘,50);
}
</script>
<style>
div.dig,div.hour,div.min,div.sec{
position: absolute;
}
div.hour,div.min,div.sec{
width: 2px;
height: 2px;
font-size: 2px;
}
div.dig{
width : 30px;
height: 10px;
font-size: 10px;
color: #00000;
text-align: center;
padding-top: 10px;
font-family: "黑体";
}
div.min{
background-color: #0000FF;
}
div.hour{
background-color: #00000;
}
div.sec{
background-color: #FF000;
}
</style>
</head>
<body onload="click1()">
<div class="example">
<table>
<tr>
<td>
<div style="width: 120px;height:100px;position: relative;left: 58px;text-outline:50px;">
<div id = "dig1" class="dig">1</div>
<div id = "dig2" class="dig">2</div>
<div id = "dig3" class="dig">3</div>
<div id = "dig4" class="dig">4</div>
<div id = "dig5" class="dig">5</div>
<div id = "dig6" class="dig">6</div>
<div id = "dig7" class="dig">7</div>
<div id = "dig8" class="dig">8</div>
<div id = "dig9" class="dig">9</div>
<div id = "dig10" class="dig">10</div>
<div id = "dig11" class="dig">11</div>
<div id = "dig12" class="dig">12</div>
<div id = "hour1" name = "hour"></div>
<div id = "hour2" name = "hour"></div>
<div id = "hour3" name = "hour"></div>
<div id = "hour4" name = "hour"></div>
<div id = "min1" class = "min"></div>
<div id = "min2" class = "min"></div>
<div id = "min3" class = "min"></div>
<div id = "min4" class = "min"></div>
<div id = "min5" class = "min"></div>
<div id = "sec1" class="sec"></div>
<div id = "sec2" class="sec"></div>
<div id = "sec3" class="sec"></div>
<div id = "sec4" class="sec"></div>
<div id = "sec5" class="sec"></div>
<div id = "sec6" class="sec"></div>
</div>
</td>
</tr>
</table>
</div>
<!--<canvas id = "clock" style="background-color: black" width="500px" height="500px">-->
<!--你的浏览器不支持canvas-->
<!--</canvas>-->
<!--<script type="text/javascript">-->
<!--var canvas = document.getElementById("clock");-->
<!--var cxt = canvas.getContext("2d");-->
<!--function drawClock(){-->
<!--var now = new Date();-->
<!--var sec = now.getSeconds();-->
<!--var mint = now.getMinutes();-->
<!--var hour = now.getHours();-->
<!--hour>12?hour-12:hour;-->
<!--hour+=(mint/60);-->
<!--//清空画布-->
<!--cxt.clearRect(0,0,canvas.width,canvas.height);-->
<!--//选择图片作为背景-->
<!--var img = new Image();-->
<!--img.src = "1.jpeg";-->
<!--cxt.drawImage(img,46,46);-->
<!--//画表盘大圆-->
<!--cxt.strokeStyle = "#00FFFF";-->
<!--cxt.lineWidth = 10;-->
<!--cxt.beginPath();-->
<!--cxt.arc(250,250,200,0,360);-->
<!--cxt.stroke();-->
<!--cxt.closePath();-->
<!--//时刻度-->
<!--for(var i;i<12;i++){-->
<!--//保持原样-->
<!--cxt.save();-->
<!--cxt.lineWidth = 7;-->
<!--cxt.strokeStyle = "#FFFF00";-->
<!--//设置原点-->
<!--cxt.translate(250,250);-->
<!--//设置旋转角度-->
<!--cxt.rotate(30*Math.PI*i/180);-->
<!--cxt.beginPath();-->
<!--cxt.moveTo(0,-175);-->
<!--cxt.lineTo(0,-195);-->
<!--cxt.stroke();-->
<!--cxt.closePath();-->
<!--cxt.restore();-->
<!--}-->
<!--//分刻度-->
<!--for(var i = 0;i < 60;i++){-->
<!--cxt.save();-->
<!--cxt.lineWidth = 5;-->
<!--cxt.strokeStyle = "#FFFF00";-->
<!--cxt.translate(250,250);-->
<!--cxt.rotate(i*6*Math.PI/180);-->
<!--cxt.beginPath();-->
<!--cxt.moveTo(0,-185);-->
<!--cxt.lineTo(0,-195);-->
<!--cxt.closePath();-->
<!--cxt.restore();-->
<!--}-->
<!--//时针的角度-->
<!--cxt.save();-->
<!--cxt.lineWidth = 7;-->
<!--cxt.strokeStyle = "#00FFFF";-->
<!--cxt.translate(250,250);-->
<!--cxt.rotate(hour*30*Math.PI/180);-->
<!--cxt.beginPath();-->
<!--cxt.moveTo(0,-130);-->
<!--cxt.lineTo(0,10);-->
<!--cxt.stroke();-->
<!--cxt.closePath();-->
<!--cxt.restore();-->
<!--//分针的角度-->
<!--cxt.save();-->
<!--cxt.lineWidth = 5;-->
<!--cxt.strokeStyle = "#FFFF00";-->
<!--cxt.translate(250,250);-->
<!--cxt.rotate(Math.PI*mint*6/180);-->
<!--cxt.beginPath();-->
<!--cxt.lineTo(0,-150);-->
<!--cxt.moveTo(0,10);-->
<!--cxt.stroke();-->
<!--cxt.closePath();-->
<!--cxt.restore();-->
<!--//秒针的角度-->
<!--cxt.save();-->
<!--cxt.lineWidth = 3;-->
<!--cxt.strokeStyle = "#FF0000";-->
<!--cxt.translate(250,250);-->
<!--cxt.rotate(sec*6*Math.PI/180);-->
<!--cxt.beginPath();-->
<!--cxt.lineTo(-0,170);-->
<!--cxt.moveTo(0,10);-->
<!--cxt.stroke();-->
<!--cxt.closePath();-->
<!--cxt.restore();-->
<!--//中间的小圆-->
<!--cxt.beginPath();-->
<!--cxt.arc(0,0,7,0,360);-->
<!--cxt.fillStyle = "#FFFF00";-->
<!--cxt.fill();-->
<!--cxt.strokeStyle = "#FF0000";-->
<!--cxt.stroke();-->
<!--cxt.closePath();-->
<!--//秒针上的小圆-->
<!--cxt.beginPath();-->
<!--cxt.arc(0,-140,7,0,360);-->
<!--cxt.fillStyle = "#FFFF00";-->
<!--cxt.fill();-->
<!--cxt.stroke();-->
<!--cxt.closePath();-->
<!--cxt.restore();-->
<!--//显示时间-->
<!--cxt.font = "18px 微软雅黑";-->
<!--cxt.lineWidth = 2;-->
<!--cxt.fillStyle = "#FFFF00";-->
<!--hour = now.getHours();-->
<!--var str = hour>10?hour:("0"+hour)+":"+(mint>10?mint:("0"+mint));-->
<!--cxt.fillText(str,225,380);-->
<!--cxt.font = "12px 宋体";-->
<!--cxt.lineWidth = 1;-->
<!--cxt.fillText("Made in china",210,400);-->
<!--}-->
<!--drawClock();-->
<!--setInterval(drawClock(),1000);-->
<!--</script>-->
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/whatcanido/p/5137994.html
