关闭

css3 + jquery模拟时钟效果

标签: jqueryjs web前端css3
114人阅读 评论(0) 收藏 举报
分类:

干货
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟时钟</title>
<style>
body, div {
margin: 0;
padding: 0;
box-sizing: border-box;
}


.box {
width: 300px;
height: 300px;
margin: 120px auto;
background: url("images/20213d50b825d729db533ff8fb41283e.png");
border-radius: 50%;
position: relative;
}


.dial span {
position: absolute;
width: 1px;
height: 8px;
background-color: mediumspringgreen;
left: 149px;
transform-origin: 0 150px;
}


.hand {
position: absolute;
width: 10px;
height: 10px;
left: 145px;
top: 145px;
background-color: aquamarine;
border-radius: 50%;
}


.sec {
position: absolute;
width: 2px;
height: 100px;
background-color: red;
left: 3px;
bottom: 5px;
transform-origin: bottom;
}


.min {
position: absolute;
width: 4px;
height: 75px;
background-color: aqua;
left: 2px;
bottom: 5px;
transform-origin: bottom;
}


.hou {
position: absolute;
width: 6px;
height: 50px;
background-color: #b2f610;
left: 1px;
bottom: 5px;
transform-origin: bottom;
}
</style>
</head>
<body>
<div class="box">
<div class="dial">
</div>
<div class="hand">
<span class="sec"></span>
<span class="min"></span>
<span class="hou"></span>
<span class="center"></span>
</div>
</div>
<script src="jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function () {
todial($(".dial"));
gettimes();
setInterval(function () {
gettimes();
}, 1000)
});


//得到刻度
function todial(obj) {
var str = "";
var ideg = 6;
for (var i = 0; i < 60; i++) {
str += "<span style='transform:rotate(" + ideg * i + "deg)'></span>"
}
obj.append(str)
}


//初始化时间
function gettimes() {
var i_data = new Date();
var i_sec = i_data.getSeconds();
var i_min = i_data.getMinutes();
var i_hou = i_data.getHours();
$(".sec").css("transform", "rotate(" + i_sec * 6 + "deg)");
$(".min").css("transform", "rotate(" + (i_min * 6 + i_sec / 60 ) + "deg)");
$(".hou").css("transform", "rotate(" + (i_hou % 12 * 30 + i_min / 60) + "deg)");
}
</script>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7276次
    • 积分:378
    • 等级:
    • 排名:千里之外
    • 原创:27篇
    • 转载:4篇
    • 译文:4篇
    • 评论:1条
    最新评论