<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
border-radius: 50%;
margin: 100px auto;
position: relative;
}
/*这是整个时钟圆盘*/
ul{
width: 200px;
height: 200px;
border-radius: 50%;
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/
}
/*这是60个刻度样式*/
ul li{
width: 2px;
height: 6px;
background: #000;
position: absolute;
top: 0;
left: 98px;
-webkit-transform-origin: center 100px;
}
li:nth-of-type(5n){
height: 15px;
}
/*这是时钟的时针样式*/
.hour{
width: 3px;
height: 70px;
background: #000;
position: absolute;
top: 50px;
left: 97px;
-webkit-transform-origin: 1.5px 50px;
}
/*这是时钟的分针样式*/
.minute{
width: 2px;
height: 80px;
background: #000;
position: absolute;
top: 40px;
left: 97.5px;
-webkit-transform-origin: 1px 60px;
}
/*这是时钟的秒针样式*/
.second{
width: 1px;
height: 90px;
background: #000;
position: absolute;
top: 30px;
left: 98px;
-webkit-transform-origin: 0.5px 70px;
}
/* 这是整点的刻度点样式*/
span{
display: inline-block;
width: 10px;
height: 20px;
position: relative;
top: 15px;
left:-15px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<!--<li></li>-->
</ul>
<!-- 这是创建时钟的时针-->
<div class="hour"></div>
<!-- 这是创建时钟的分针-->
<div class="minute"></div>
<!-- 这是创建时钟的秒针-->
<div class="second"></div>
</div>
</body>
<script type="text/javascript">
var oUl=document.querySelector('ul');
// 这是创建60个刻度点
for (var i=0;i<60;i++) {
// 创建60个刻度的li节点
var li=document.createElement('li');
// 这是整点添加数字
if(i%5==0){
var j=i/5;
var oPs=document.createElement('span');
oPs.innerHTML=j;
li.appendChild(oPs);
// 添加12点
if( oPs.innerHTML==0){
oPs.innerHTML=12;
}
// 这是设置3 6 9 12等数字变为红色;
if(j%3==0){
oPs.style.fontSize=24+'px';
oPs.style.color='red';
}
}
// 在ul里面添加60个li节点
oUl.appendChild(li);
}
// 获取到所有的li
var aLi=document.querySelectorAll('li');
// 把60个li以圆心依次旋转6度
for (var k=0;k<60;k++) {
aLi[k].style.transform='rotate('+(k+1)*6+'deg)';
}
// 获取到时针分针秒针
var hour=document.querySelector('.hour');
var second=document.querySelector('.second');
var minute=document.querySelector('.minute')
// 这是一个定时器每隔一秒就启动time()这个函数;
setInterval(time,1000);
function time(){
// 获取本地时间
var now=new Date();
var Second=now.getSeconds();
var Minute=now.getMinutes();
var Hour=now.getHours();
//把时针按照对应比例旋转(+Minute/60)加上一点分钟的时间时针就会时刻变化,不会显得突兀
hour.style.transform='rotate('+(Hour+Minute/60)*30+'deg)';
//把分针按照对应比例旋转+Minute/60加上一点秒钟的时间分针就会时刻变化,不会显得突兀
minute.style.transform='rotate('+(Minute+Second/60)*6+'deg)';
//把秒针按照对应比例旋转
second.style.transform='rotate('+(Second)*6+'deg)';
}
// 最后自启这个函数不用等待一秒在启动,打开页面时钟就会动
time();
</script>
</html>
下面是效果图