js 分享一个 时钟效果
<style>
*{
margin: 0;
padding: 0;
}
#outLine{
width: 300px;
height: 300px;
border-radius: 300px;
background-color: beige;
position: relative;
}
#inLine
{
width: 280px;
height: 280px;
position: absolute;
border-radius: 280px;
background-color: white;
left:10px;
top: 10px;
}
#inLine div:not([id])
{
width: 280px;
height: 30px;
*{
margin: 0;
padding: 0;
}
#outLine{
width: 300px;
height: 300px;
border-radius: 300px;
background-color: beige;
position: relative;
}
#inLine
{
width: 280px;
height: 280px;
position: absolute;
border-radius: 280px;
background-color: white;
left:10px;
top: 10px;
}
#inLine div:not([id])
{
width: 280px;
height: 30px;
position: absolute;
top:125px;
transform-origin: 140px 15px;
}
.begin
{
width: 30px;
float: right;
line-height: 30px;
text-align: center;
}
.end
{
text-align: center;
width: 30px;
float: left;
line-height: 30px;
}
#inLine div:nth-child(1)
{
transform: rotate(-90deg);
}
#inLine div:nth-child(2)
{
transform: rotate(-60deg);
}
#inLine div:nth-child(3)
{
transform: rotate(-30deg);
}
top:125px;
transform-origin: 140px 15px;
}
.begin
{
width: 30px;
float: right;
line-height: 30px;
text-align: center;
}
.end
{
text-align: center;
width: 30px;
float: left;
line-height: 30px;
}
#inLine div:nth-child(1)
{
transform: rotate(-90deg);
}
#inLine div:nth-child(2)
{
transform: rotate(-60deg);
}
#inLine div:nth-child(3)
{
transform: rotate(-30deg);
}
#inLine div:nth-child(5)
{
transform: rotate(30deg);
}
#inLine div:nth-child(6)
{
transform: rotate(60deg);
}
#inLine div:first-child span
{
transform: rotate(90deg);
}
#hour{
width: 80px;
height: 10px;
transform-origin: 0px 5px;
background-color: chartreuse;
transform: rotate(-90deg);
position: absolute;
left: 140px;
top:135px;
}
#minute,#second
{
width: 100px;
height: 10px;
transform-origin: 0px 5px;
background-color: chartreuse;
transform: rotate(-90deg);
position: absolute;
left: 140px;
top:135px;
}
</style>
<body>
<div id="outLine">
<div id="inLine">
<div><span class="begin">12</span><span class="end">6</span></div>
<div><span class="begin">1</span><span class="end">7</span></div>
<div><span class="begin">2</span><span class="end">8</span></div>
<div><span class="begin">3</span><span class="end">9</span></div>
<div><span class="begin">4</span><span class="end">10</span></div>
<div><span class="begin">5</span><span class="end">11</span></div>
<div id="hour"></div> <!-- 时针的div-->
<div id="minute"></div> <!--分针的div-->
<div id="second"></div> <!--秒针的div-->
</div>
</div>
</body>
{
transform: rotate(30deg);
}
#inLine div:nth-child(6)
{
transform: rotate(60deg);
}
#inLine div:first-child span
{
transform: rotate(90deg);
}
#hour{
width: 80px;
height: 10px;
transform-origin: 0px 5px;
background-color: chartreuse;
transform: rotate(-90deg);
position: absolute;
left: 140px;
top:135px;
}
#minute,#second
{
width: 100px;
height: 10px;
transform-origin: 0px 5px;
background-color: chartreuse;
transform: rotate(-90deg);
position: absolute;
left: 140px;
top:135px;
}
</style>
<body>
<div id="outLine">
<div id="inLine">
<div><span class="begin">12</span><span class="end">6</span></div>
<div><span class="begin">1</span><span class="end">7</span></div>
<div><span class="begin">2</span><span class="end">8</span></div>
<div><span class="begin">3</span><span class="end">9</span></div>
<div><span class="begin">4</span><span class="end">10</span></div>
<div><span class="begin">5</span><span class="end">11</span></div>
<div id="hour"></div> <!-- 时针的div-->
<div id="minute"></div> <!--分针的div-->
<div id="second"></div> <!--秒针的div-->
</div>
</div>
</body>
<script>
var seconds=0;
var minutes=0;
var hours=0;
var second=document.querySelector("#second");
var minute=document.querySelector("#minute");
var hour=document.querySelector("#hour");
animation();
function animation() {
requestAnimationFrame(animation); //浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。
var date=new Date();
seconds=date.getSeconds()*6-90+date.getMilliseconds()*(6/1000); //度数
second.style.transform="rotate("+seconds+"deg)"; //秒针转过的度数
minutes=date.getMinutes()*6-90+date.getSeconds()*(6/60);
minute.style.transform="rotate("+minutes+"deg)"; //分针转过的度数
hours=date.getHours()*30-90+date.getMinutes()*(30/60)+date.getSeconds()*(30/3600);
hour.style.transform="rotate("+hours+"deg)"
}
</script>
