CSS3时钟

最新推荐文章于 2022-02-22 16:42:42 发布

蓝草毁灭

最新推荐文章于 2022-02-22 16:42:42 发布

阅读量361

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3运用

本文链接：https://blog.youkuaiyun.com/lanbinghan2016/article/details/51273834

CSS3运用专栏收录该内容

6 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<style>
body{}
ul{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 .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%);width: 20px;height: 10px;background-color: red;z-index: 1;transform-origin: left center;}*/
.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 .hour{width:45px;height: 3px;margin-top: -1px;}
.pointer .min{width:60px;height: 2px;margin-top: -1px;}
.pointer .sec{width:80px;height: 1px;margin-top: -1px;}
</style>
<body>
<h1>时钟</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="jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
function init(){
drawLines($(".line-min"),60,85);
drawLines($(".line-hour"),12,80);
drawNumbers($(".number"));
move();
}
init();
//wrap 刻度线的父容器
//total 刻度线的总个数
//translate表示相对于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);
};
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),
   myY=radius+radius*Math.sin(myAngle);
strHTML+='<li style="left:'+ myX +'px; top:'+ myY +'px">'+ i +'</li>';
}
wrap.html(strHTML);
}
function move(){
var donHour=$(".hour"),
donMin=$(".min"),
donSec=$(".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;
donSec.css('transform','rotate('+secAngle+'deg)');
donMin.css('transform','rotate('+minAngle+'deg)');
donHour.css('transform','rotate('+hourAngle+'deg)');
document.title=hour+':'+min+':'+sec;
},1000);
}
});
</script>
</body>
</head>
</html>