标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
无标题文档
</title>
<style>
.sz{ background:#FC9; border-radius:50%; width:200px; height:200px; position:relative;}
.hours{ position:absolute; width:6px; height:40px; background-color:#000;
left:97px; bottom:100px; transform:rotate(0deg); transform-origin:bottom;}
.minutes{ position:absolute; width:4px; height:50px; background-color:#6CF;left:98px;
bottom:100px; transform:rotate(0deg); transform-origin:bottom;} .seconds{
position:absolute; width:2px; height:70px; background-color:#F66;left:99px;
bottom:100px; transform:rotate(0deg); 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">
3232
</p>
<input onclick="clearcolck()" name="" value="按钮" type="button" />
<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;
}
function clearcolck() {
clearInterval(colck);
}
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)‘;
}
function hdeg(i, j) {
if (i > 12) {
i = i - 12;
} else if (i = 12) {
i = 0;
} else {
i = i;
}
i = i * 30;
j = (j / 60) * 30;
return i + j;
}
function mdeg(i) {
i = i * 6;
return i;
}
</script>
标签：
原文地址：http://www.cnblogs.com/yiranfly/p/4711466.html
