使用 HTML5 、CSS3 、jQuery制作模拟钟表
先上效果图
鼠标划过表盘时会显示年月日,星期几
实现原理
定位:transform-origin:x y;
。先找准刻度或者指针的定位中心点。我这里一开始时针、分针、秒针都是指向 12 点的,就对应 0 时 0 分 0 秒。可以看到三根指针的尾部有一截突出,就是用定位做的。
移动:transform:translate();
。再移动到合适的位置。表盘刻度都是先让其移动到 3 点的位置,然后在旋转分布每一个刻度,刻度分布是用js做的,因为刻度比较多并且是有规律的,可以使用程序完成。
旋转:transform:rotateZ()
。旋转对应的角度,注意是rotateZ()
上源码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>virtual-clock</title>
<style type="text/css">
body{
margin: 0;
background-color: #EEEEEE;
}
.container{
width: 508px;
height: 508px;
margin: 50px auto;
text-align: center;
line-height: 500px;
/* border: 1px solid purple; */
}
.dial{
width: 500px;
height: 500px;
display: inline-block;
text-align: center;
line-height: 500px;
border-radius: 50%;
background-color: aliceblue;
border: 4px solid #424242;
box-shadow: 0 0 10px #424242;
position: relative;
}
.center, .center-small{
display: inline-block;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
}
.center{
width: 20px;
height: 20px;
background-color: #4B0082;
margin: -10px 0 0 -10px;
box-shadow: 0 0 5px #424242;
}
.center-small{
width: 6px;
height: 6px;
background-color: #EEEEEE;
margin: -3px 0 0 -3px;
z-index: 15;
}
.secondPointer,
.minutePointer,
.hourPointer{
display: inline-block;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
position: absolute;
}
.secondPointer{
width: 4px;
height: 250px;
top: 30px;
margin: 0 0 0 -2px;
background-color: crimson;
transform-origin:center 220px ;
z-index: 12;
}
.minutePointer{
width: 8px;
height: 210px;
margin: 0 0 0 -4px;
top: 70px;
background-color: #4B0088;
transform-origin: center 180px;
z-index: 10;
}
.hourPointer{
width: 12px;
height: 170px;
top: 110px;
background-color: #424242;
margin: 0 0 0 -6px;
transform-origin: center 140px;
}
.big-mark,
.middle-mark,
.small-mark{
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
}
.dial .big-mark{
width: 30px;
height: 10px;
margin: -5px 0 0 -15px;
background-color: #006CD9;
transform-origin: -220px center;
}
.dial .middle-mark{
width: 20px;
height: 8px;
margin: -4px 0 0 -10px;
background-color: #006CD9;
transform-origin: -230px center;
transform: translateX(240px) rotateZ(30deg);
}
.dial .small-mark{
width: 10px;
height: 6px;
margin: -3px 0 0 -5px;
background-color: brown;
transform-origin: -240px center;
transform: translateX(245px) rotateZ(6deg);
}
.hour-num{
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 40px;
color: #424242;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;
/* background-color: #006CD9; */
}
.hour-num.hn-12 {
transform: translateY(-200px);
}
.hour-num.hn-3 {
transform: translateX(200px);
}
.hour-num.hn-6 {
transform: translateY(200px);
}
.hour-num.hn-9 {
transform: translateX(-200px);
}
.date{
display: inline-block;
width: 100px;
height: 50px;
position: absolute;
top: 290px;
left: 50%;
margin: 0 0 0 -50px;
border-radius: 5px;
box-shadow: 0 0 5px #424242;
background-color: yellowgreen;
opacity: 0;
}
.date>p{
margin: 0;
line-height: 25px;
color: #EEEEEE;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="dial"><!-- 表盘 -->
<div class="center"></div> <!-- 中心圆点-->
<div class="center-small"></div> <!-- 中心顶层小圆点-->
<div class="secondPointer"></div> <!-- 秒针 -->
<div class="minutePointer"></div> <!-- 分针 -->
<div class="hourPointer"></div> <!-- 时针-->
<span class="hour-num hn-12">12</span>
<span class="hour-num hn-3">3</span>
<span class="hour-num hn-6">6</span>
<span class="hour-num hn-9">9</span>
<div class="date"><p>2019-4-18</p><p>星期四</p></div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var virtualClock = (function($,window){
//对表盘进行布局,
function dialLayout(){
var str = '';
for(var i=0;i<60;i++) {
if(i % 15 === 0) {//小时 3 6 9 12
str += '<span class="big-mark" style="transform:translateX(235px) rotateZ('+ i*6 +'deg);"></span>';
} else if(i % 15 !== 0 && i % 5 === 0) { //小时 1 2 4 5 7 8 10 11
str += '<span class="middle-mark" style="transform:translateX(240px) rotateZ('+ i*6 +'deg);"></span>';
} else { // 分钟
str += '<span class="small-mark" style="transform:translateX(245px) rotateZ('+ i*6 +'deg);"></span>';
}
}
$('.dial').append(str);
}
//处理时间
function handleTime(flag)
{
var date = new Date();
if(flag) {
var weeks = ['日','一','二','三','四','五','六'];
return {
'yearMonthDay' : date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),
'week' : '星期'+weeks[date.getDay()]
};
}
return {
'hour' : date.getHours(),
'minute' : date.getMinutes(),
'second' : date.getSeconds()
};
}
//时针、分针、秒针跑起来
function running(secondPointer,minutePointer,hourPointer){
var time = handleTime();
secondPointer.css('transform','rotateZ('+ time.second*6 +'deg)');
//在time.minute的基础上,秒针每过十秒,分针转动1度
minutePointer.css('transform','rotateZ('+ (time.minute*6 + Math.floor(time.second/10)) +'deg)');
//在time.hour的基础上,分针每过两分钟,时针转动1度
hourPointer.css('transform','rotateZ('+ (time.hour*30 + Math.floor(time.minute/2)) +'deg)');
}
function init(){
var secondPointer = $('.secondPointer'),
minutePointer = $('.minutePointer'),
hourPointer = $('.hourPointer');
$('.dial').hover(function(){
var date = handleTime(true),
datePanel = $(this).find('.date');
datePanel.children(':first').text(date.yearMonthDay);
datePanel.children(':last').text(date.week);
datePanel.stop().animate({'opacity':0.8},1000);
},function(){
$(this).find('.date').stop().animate({'opacity':0},1000);
});
dialLayout(); //调用表盘布局函数
//时间走动
setInterval(function(){
running(secondPointer,minutePointer,hourPointer);
},1000);
}
return init;
}(jQuery,window));
virtualClock();
</script>
</body>
</html>