jquery和css实现的圆形钟表效果

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了圆形钟表效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
padding: 0;
margin: 0;
border: none;
}
body, html {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 100%;
position: relative;
}
.box_top, .box_bottom {
width: 100%;
height: 50%;
position: absolute;
z-index: 0;
left: 0;
top: 0;
}
.box_bottom {
background: #3598db;
position: absolute;
z-index: 0;
left: 0;
top: 50%;
}
.clock {
width: 500px;
height: 500px;
position: relative;
left: 50%;
top: 50%;
margin: -250px 0 0 -250px;
background: #3598db;
border-radius: 50%;
}
.nmb {
position: relative;
width: 100%;
height: 100%;
}
.nmb div {
position: absolute;
width: 220px;
height: 24px;
left: 30px;
top: 50%;
margin: -12px 0 0 0;
display: block;
font-weight: bold;
font-size: 24px;
transform: rotate(0deg);
transform-origin: right center;
}
.nmb div span {
position: absolute;
color: #fff;
}
.sec, .min, .hou {
position: absolute;
left: 50%;
transform-origin: center bottom;
z-index: 10;
}
.sec {
background: #d22;
height: 200px;
width: 2px;
margin: 0 0 0 -1px;
top: 50px;
z-index: 100;
}
.min {
height: 170px;
width: 6px;
margin: 0 0 0 -3px;
top: 80px;
background: #fff;
border-radius: 4px;
}
.hou {
height: 140px;
width: 10px;
margin: 0 0 0 -5px;
top: 110px;
background: #fff;
border-radius: 5px;
}
.keduxian div {
width: 248px;
position: absolute;
left: 2px;
top: 50%;
margin: -1px 0 0 0;
transform-origin: right center;
}
.keduxian p {
background: #fff;
width: 8px;
height: 2px;
border-radius: 0 2px 2px 0;
}
.yuanxin {
width: 10px;
height: 10px;
background: #d22;
border-radius: 5px;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
position: absolute;
z-index: 999;
}
</style>
</head>
<body>
<div class="box">
<div class="clock">
<div class="nmb">
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
</div>
<div class="keduxian"></div>
<div class="sec"></div>
<div class="min"></div>
<div class="hou"></div>
<div class="yuanxin"></div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function() {
for (var i = 0; i < 12; i++) {
$('.nmb div').eq(i).css('transform', 'rotate(' + i * 30 + 'deg)');
$('.nmb div').eq(i).find('span').css('transform', 'rotate(' + i * -30 + 'deg)');
}
for (var j = 0; j < 60; j++) {
var keduxian = $('<div><p></p></div>');
$('.keduxian').append(keduxian);
$('.keduxian div').eq(j).css('transform', 'rotate(' + j * 6 + 'deg)');
if (j % 5 == 0) {
$('.keduxian div').eq(j).find('p').css('width', '20px').css('height', '4px');
}
}
setInterval('aa()', 1000);
})
function aa() {
var time = new Date();
var sec = time.getSeconds();
var min = time.getMinutes() + time.getSeconds() / 60;
var hou = time.getHours() + time.getMinutes() / 60;
$('.sec').css('transform', 'rotate(' + sec * 6 + 'deg)');
$('.min').css('transform', 'rotate(' + min * 6 + 'deg)');
$('.hou').css('transform', 'rotate(' + hou * 30 + 'deg)');
}
</script>
</body>
</html>

jquery和css实现的圆形钟表效果,这样的场景在实际项目中还是用的比较多的,关于jquery和css实现的圆形钟表效果就介绍到这了。

jquery和css实现的圆形钟表效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容