之前在网站上看到过别人用几行CSS代码就实现了一个简单的时钟,感觉挺有趣的,就自己仿照着也实现了一下。感觉里面用到的知识点都挺适合新手学习的,所以贴出来和大家一起学习学习。下面是实现后的效果图。
实现的原理很简单,但是里面也有些需要注意的地方。
首先看HTML结构,整个时钟包含在一个div中,在父div中又包含了时钟的圆盘,时钟的各个指针。
<body>
<div id="circle">
<div id="pointer">
<div><span>12</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
</div>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<script src="clock.js"></script>
</body>
然后是CSS样式
*{
padding:0;
margin:0;
}
#circle{
width:200px;
height:200px;
position:relative;
border-radius:50%;
border:5px solid red;
background-color:rgb(255,255,0);
opacity:0.5;
margin:100px auto;
}
#pointer{
width:200px;
height:200px;
position:absolute;
}
#pointer div {
width:20px;
height:200px;
position:absolute;
left:90px;
}
#circle span {
display:block;
position:absolute;
}
#hour {
width:3px;
height:50px;
position:absolute;
background-color:#00FF00;
left:95px;
top:50px;
transform-origin:bottom center;
}
#minute {
width:3px;
height:70px;
position:absolute;
background-color:#0000CD;
left:96px;
top:30px;
transform-origin:bottom center;
}
#second {
width:2px;
height:90px;
position:absolute;
background-color:#FF00FF;
left:97px;
top:10px;
transform-origin:bottom center;
}
最后如何通过js旋转刻度,如何通过当前的时间计算各个指针旋转的角度。下面是JS代码。
(function() {
var timer ={};
var div =document.getElementById('pointer');
var divs = div.children;
for(var i=0;i<divs.length;i++) {
divs[i].style.transform = "rotate("+i*30+"deg)";
divs[i].firstChild.style.transform = "rotate("+i*-30+"deg)";
}
var hourDiv = document.getElementById('hour');
var minuteDiv = document.getElementById('minute');
var secondDiv = document.getElementById('second');
var currentDate = new Date();
timer.hour = currentDate.getHours()%12;
timer.minute = currentDate.getMinutes();
timer.second = currentDate.getSeconds();
setInterval(function(){
timer.second++;
if(timer.second==60) {
timer.second=0;
timer.minute++;
if(timer.minute==60) {
timer.minute=0;
timer.hour++;
if(timer.hour==13) {
timer.hour=0;
}
}
}
secondDiv.style.transform="rotate("+timer.second*6+"deg)";
minuteDiv.style.transform="rotate("+timer.minute*6+"deg)";
hourDiv.style.transform="rotate("+(timer.hour*30+timer.minute*0.5)+"deg)";
},1000);
return timer;
})();