通过css与js结合完成时钟,这个时钟显示的是当前的时间,实现的效果是秒针每一秒走一格,即6弧度;分针每一分走一格,即6弧度;时针每10分钟走一格,即一小时旋转30弧度。
效果图如下:
1.Html部分:在html里面写出时钟结构,分别写出时钟的时针、分针和秒针。里面的ul是为了实现钟表上的秒针的指向,秒针每走过一个小方格就是一秒。代码如下:
<div id="time">
<ul>
</ul>
<div id="hour"></div>
<div id="minu"></div>
<div id="seco"></div>
<div id="ball"></div>
</div>
2.css部分,实现时钟的基本样式,代码如下:
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#time {
width: 300px;
height: 300px;
border: 5px black solid;
margin: 30px auto;
border-radius: 50%;
position: relative;
}
#time ul {
width: 100%;
height: 100%;
position: relative;
}
#time ul li {
width: 2px;
height: 8px;
background: black;
position: absolute;
left: 50%;
top: 0;
transform-origin: center 150px;
}
#hour {
width: 6px;
height: 50px;
background: black;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -3px;
transform-origin: center bottom;
}
#minu {
width: 4px;
height: 80px;
background: black;
position: absolute;
left: 50%;
top: 50%;
margin: -80px 0 0 -2px;
transform-origin: center bottom;
}
#seco {
width: 2px;
height: 120px;
background: black;
position: absolute;
left: 50%;
top: 50%;
margin: -120px 0 0 -1px;
transform-origin: center bottom;
}
#ball {
width: 20px;
height: 20px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
margin: -10px;
border-radius: 50%;
}
3.js部分,实现时钟的具体运动,秒针每一秒走一格,即6弧度;分针每一分走一格,即6弧度;时针每10分钟走一格,即一小时旋转30弧度。代码如下:
//获取节点
var ul = document.querySelector('ul');
var hour = document.querySelector('#hour');
var minu = document.querySelector('#minu');
var seco = document.querySelector('#seco');
for (var i = 0; i < 60; i++) {
//创建li节点
var li = document.createElement('li');
//在时钟周围没隔1弧度安插一个li。
li.style.transform = 'rotate(' + (i * 6) + 'deg)';
if (i % 5 === 0) {
li.style.height = '15px';
}
//将创建的li节点追加到ul中,显示到页面上
ul.appendChild(li);
}
run();
//设置定时器
setInterval(run, 1000);
//封装函数
function run() {
//获取当前时间
var date = new Date();
//获取时,分,秒
var iH = date.getHours();
var iM = date.getMinutes();
var iS = date.getSeconds()
//给时针、分针和秒针赋值
hour.style.transform = 'rotate(' + (iH * 30 + iM / 2) + 'deg)';
minu.style.transform = 'rotate(' + (iM * 6) + 'deg)';
seco.style.transform = 'rotate(' + (iS * 6) + 'deg)';
}