<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圆形钟表</title>
<style type="text/css">
#outbox {
position: relative;
border-radius: 50%;
width: 400px;
height: 400px;
margin: 150px auto;
background: linear-gradient(#D1E6ED, #767775);
}
#innerbox {
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
margin: 20px;
background-color: white;
box-shadow: 0 0 10px 5px gray inset;
}
#innerbox > div {
width: 350px;
height: 32px;
font-size: 1.5em;
line-height: 32px;
text-align: center;
position: absolute;
top: 164px;
left: 5px;
}
#innerbox > div > span:nth-child(1) {
float: left;
}
#innerbox > div > span:nth-child(2) {
float: right;
}
#second_line {
height: 175px;
width: 4px;
background-color: red;
top: 25px;
left: 198px;
position: absolute;
z-index: 13;
}
#minute_line {
height: 150px;
width: 6px;
background-color: blue;
top: 50px;
left: 197px;
position: absolute;
z-index: 12;
}
#hour_line {
height: 130px;
width: 8px;
background-color: black;
top: 70px;
left: 196px;
position: absolute;
z-index: 11;
}
</style>
</head>
<body>
<div id="outbox">
<div id="innerbox">
<div>
<span>1</span><span>7</span>
</div>
<div>
<span>2</span><span>8</span>
</div>
<div>
<span>3</span><span>9</span>
</div>
<div>
<span>4</span><span>10</span>
</div>
<div>
<span>5</span><span>11</span>
</div>
<div>
<span>6</span><span>12</span>
</div>
</div>
<div id="second_line">
</div>
<div id="minute_line">
</div>
<div id="hour_line">
</div>
</div>
</body>
<script>
var hours, minutes, seconds;
//获取所有元素
var arrDiv = document.querySelectorAll("#innerbox>div");
var arrSpan = document.querySelectorAll("#innerbox>div>span");
//布局
for (var i = 0; i < arrDiv.length; i++) {
arrDiv[i].style.transform = "rotateZ(-" + (240 - 30 * i) + "deg)";
}
for (var i = 0; i < arrSpan.length; i += 2) {
arrSpan[i].style.transform = "rotateZ(" + (240 - 15 * i) + "deg)";
arrSpan[i + 1].style.transform = "rotateZ(" + (240 - 15 * i) + "deg)";
}
//选择旋转点
document.getElementById("second_line").style.transformOrigin = "bottom";
document.getElementById("minute_line").style.transformOrigin = "bottom";
document.getElementById("hour_line").style.transformOrigin = "bottom";
//获取秒数
seconds = new Date().getSeconds();
//获取分钟数,如果seconds=30,相当于分针转了(30/60)分钟
minutes = new Date().getMinutes() + seconds / 60;
//获取小时数,同理可得
hours = new Date().getHours() + minutes / 60;
//计时器
setInterval(init, 1000);
//初始化
function init() {
hours = hours + 1 / 3600;
minutes = minutes + 1 / 60;
seconds++;
document.getElementById("second_line").style.transform = "rotate(" + 6 * seconds + "deg)";
document.getElementById("minute_line").style.transform = "rotate(" + 6 * minutes + "deg)";
document.getElementById("hour_line").style.transform = "rotate(" + 30 * hours + "deg)";
}
init();
</script>
</html>
