<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin Slab:400,700" type="text/css">
<title>CSS3时钟</title>
<style>
body {
/*background-color: #ccc;*/
}
ol,ul {
margin: 0
;
padding: 0
;
list-
style: none;
}
h1{
text-
align: center;
color: #333
;
margin-
top: 40px;
font-family: 'Microsoft Yahei'
;
}
.clock{
position: relative;
width: 200px;
height: 200px;
border-radius: 100%
;
background-
color: #292a38;
margin: 50px auto;
}
.pointer li.circle{
position: absolute;
top: 50%
;
left: 50%
;
transform-
origin: left center;
background:#fff;
width: 10px;
height: 10px;
border-radius: 100%
;
margin-top: -
5px;
margin-left: -
5px;
}
/*.line-demo{
position: absolute;
left: 50%;
top: 50%;
transform: rotate(-60deg) translate(75px,-50%);
transform-origin: left center;
width: 20px;
height: 10px;
background-color: red;
z-index: 1;
} */
/*刻度*/
.line-hour li,.line-
min li{
position: absolute;
left: 50%
;
top: 50%
;
transform-
origin:left center;
background-
color: #fff;
}
.line-
hour li{
width: 10px;
height: 2px;
}
.line-
min li{
width: 5px;
height: 2px;
}
/*数字*/
.number {
position: absolute;
height: 150px;
width: 150px;
left: 50%
;
top: 50%
;
transform: translate(-50%, -50%
);
font-family: 'Microsoft Yahei'
;
font-
size: 15px;
color: #fff;
}
.number li {
position: absolute;
transform: translate(-50%, -50%
);
}
/*指针*/
.pointer li{
position: absolute;
top: 50%
;
left: 50%
;
transform-
origin: left center;
background:#fff;
}
.pointer li.hour{
width: 45px;
height: 3px;
margin-top: -
1px;
}
.pointer li.min{
width: 60px;
height: 2px;
margin-top: -
1px;
}
.pointer li.sec{
width: 45px;
height: 3px;
margin-top: -
1px;
}
</style>
</head>
<body>
<h1>css 始终效果演示</h1>
<div class="clock">
<ul class="line-min"></ul>
<ul class="line-hour">
<li class="line-demo"></li>
</ul>
<ol class="number"></ol>
<ul class="pointer">
<li class="hour"></li>
<li class="min"></li>
<li class="sec"></li>
<li class="circle"></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
function init(){
drawLines($('.line-min'),60,85
);
drawLines($('.line-hour'),12,80
);
drawNumbers($('.number'
));
move();
}
init();
// 绘制钟表刻度线
//@param wrap 刻度线的父容器
//@param total 刻度线的总个数
//@param translateX 刻度线在x轴方向的偏移量
function drawLines(wrap,total,translateX){
var gap = 360/total;
var strHtml = ""
;
for(
var i=0;i<total;i
){
strHtml = '<li style="transform:rotate(' (i*gap) 'deg)translate(' translateX 'px,-50%)"></li>'
;
}
wrap.html(strHtml);
}
// 绘制时钟数字
//@param wrap 数字的父容器
function drawNumbers(wrap){
var radius = wrap.width() / 2
;
var strHtml = ''
;
for(
var i=1;i<=12;i
){
var myAngle = (i-3)/6 * Math.PI;
var myX = radius radius*Math.cos(myAngle),
//x= r rcos(0)
myY = radius radius*Math.sin(myAngle);
//y= r rsin(0)
strHtml = '<li style="left:' myX 'px; top:' myY 'px">' i '</li>'
;
}
wrap.html(strHtml);
}
//钟表走动，转动秒针、分针、时针
function move(){
//获取指针
var domHour = $('.hour'
),
domMin = $('.min'
),
domSec = $('.sec'
);
setInterval(function(){
var now =
new Date(),
hour =
now.getHours(),
min =
now.getMinutes(),
sec =
now.getSeconds();
var secAngle = sec*6 - 90
,
minAngle = min*6 sec*0.1 - 90
,
hourAngle = hour*30 min*0.5 - 90
;
domSec.css('transform','rotate(' secAngle 'deg)'
);
domMin.css('transform','rotate(' minAngle 'deg)'
);
domHour.css('transform','rotate(' hourAngle 'deg)'
);
document.title = hour ':' min ':'
sec;
},1000
);
}
})
</script>
</body>
</html>
更多专业前端知识，请上
【猿2048】www.mk2048.com
