<!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
>