写了一个时钟，效果一般般

来源：互联网发布：世界首家网络银行是编辑：程序博客网时间：2024/06/01 10:25

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>

<style>

*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
h1{
text-align: center;
}
.clock{
position: relative;
width: 200px;
height: 200px;
background: #262938;
border-radius: 100%;
margin: 50px auto;
}
.line-min{

}
.circle{
position: absolute;
top: 50%;
left: 50%;
transform-origin: left center; /* ???? */
width: 10px;
height: 10px;
margin-top: -5px;
margin-left: -5px;
border-radius: 50%;
background: #F7FAFF;
}
.line-hour li,.line-min li{
position: absolute;
top: 50%;
left: 50%;
/* z-index: 1; */
transform-origin: left center;
background: #fff;
}
.line-hour li{
width: 10px;
height: 2px;
}
.line-min li{
width: 5px;
height: 2px;
}
.number{
position: absolute;
width: 150px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Microsoft Yahei";
font-size: 15px;
color: #FFF;
z-index: 10;
}
.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: 80px;
height: 1px;
margin-top: -1px;
}</style>

$(function(){
function init(){
drawLines($(".line-min"), 60, 85);
drawLines($(".line-hour"), 12, 80);
drawNumbers($(".number"));
move();
}
init();

function drawLines(wrap, number, translateX){
var gap = 360 / number;
var strHtml = '';
for (var i = 0; i < number; i++) {
strHtml += '<li style="transform: rotate(' + (i * gap) + 'deg) translate(' + translateX + 'px, -50%)"></li>'
}
wrap.html(strHtml);
}
function drawNumbers(wrap){
var r = wrap.width() / 2;
var strHtml = '';
for (var i = 1; i <= 12; i++) {
var myAngle = (i -3) / 6 * Math.PI;
var left = r + r * Math.cos(myAngle);
var top = r + r * Math.sin(myAngle);
strHtml += '<li style="top: ' + top + 'px; left: ' + left + 'px">' + i + '</li>'
}
wrap.html(strHtml);
}
function move(){
var domHour = $(".hour");
var domMin = $(".min");
var domSec = $(".sec");
setInterval(function(){
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var secAngle = sec * 6 - 90;
var minAngle = min * 6 + sec * 6 / 60 - 90;
var hourAngle = hour * 30 + min * 6 / 12 - 90;
domHour.css("transform", 'rotate(' + hourAngle + 'deg)');
domMin.css("transform", 'rotate(' + minAngle + 'deg)');
domSec.css("transform", 'rotate(' + secAngle + 'deg)');
},1000)
}
})

</script>

</head>
<body>
<h1>CSS 时钟效果分步实现</h1>
<div class="clock">
<ul class="line-min"></ul>
<ul class="line-hour">

</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>
</body>
</html>

阅读全文

0 0