JavaScript圆形钟表效果

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

关于更多的钟表特效可以参阅时间日期特效分类。

下面分享一个使用js和css3实现的圆形钟表效果,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
.box {
width: 400px;
height: 400px;
border-radius: 50%;
margin: 200px auto;
position: relative;
}
.box div {
position: absolute;
top: 50%;
left: 50%;
transform-origin: left center;
width: 200px;
height: 3px;
background: red;
z-index: 2;
transform: rotate(-90deg);
}
.box i {
display: inline-block;
*display: inline;
*zoom: 1;
width: 20px;
height: 5px;
background: #aaa;
position: absolute;
top: 50%;
left: 50%;
margin-left: 180px;
transform-origin: -180px center;
}
.box b {
display: inline-block;
*display: inline;
*zoom: 1;
width: 10px;
height: 3px;
background: #aaa;
position: absolute;
top: 50%;
left: 50%;
margin-left: 190px;
transform-origin: -190px center;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById("box");
var divO = box.getElementsByTagName("div");
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var hpos = 270 + ((h - 12) + m / 60) * 30;
var mpos = 270 + 6 * m;
var spos = 270 + 6 * s;
var sdeg = spos;
var mdeg = mpos;
var hdeg = hpos;
var d;
var count = s;
divO[0].style.width = "100px";
divO[1].style.width = "150px";
function move() {
count++;
// console.log(count);
sdeg += 6;
divO[0].style.transform = "rotate(" + hdeg + "deg)";
divO[1].style.transform = "rotate(" + mdeg + "deg)";
divO[2].style.transform = "rotate(" + sdeg + "deg)";
if (count % 60 == 0) {
mdeg += 6;
divO[1].style.transform = "rotate(" + mdeg + "deg)";
hdeg += 0.5;
divO[0].style.transform = "rotate(" + hdeg + "deg)";
}
}
setInterval(move, 1000);
move();
for (var i = 0; i < 12; i++) {
box.innerHTML += "<i class='i" + i + "'></i>";
}
for (var b = 0; b < 60; b++) {
box.innerHTML += "<b class=b'" + b + "'></b>"
}
var iO = box.getElementsByTagName("i");
//12个刻度
for (var j = 0; j < 12; j++) {
d = 30 * j;
iO[j].style.transform = "rotate(" + d + "deg)"
}
//60个刻度
var bO = box.getElementsByTagName("b");
for (var c = 0; c < 60; c++) {
md = 6 * c;
bO[c].style.transform = "rotate(" + md + "deg)"
}
}    
</script>
</head>
<body>
<div id="box" class="box">
<div class="h"></div>
<div class="m"></div>
<div class="s"></div>
</div>
</body>
</html>

回复

我来回复
  • 暂无回复内容