CSS3時鐘 css 始終效果演示 ... ...
<!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>
