jQuery配合html5做到动态时钟效果
程序员文章站
2022-05-28 10:02:54
...
因为html基础较差所以页面有些难看
但主要是学习jQuery的使用
先来看看效果
指针位置不要在意…
来看下布局
<div style="background:url('img/clock.jpg');width: 425px;height: 425px">
<div class="center"></div>
<div class="pointer hour"></div>
<div class="pointer second"></div>
<div class="pointer minute"></div>
</div>
<style type="text/css">
.center{
width: 15px;
height: 15px;
border-radius: 50%;
background: #514f64;
top: 212px;
left: 212px;
position: absolute;
}
.pointer {
position: absolute;
position: absolute;
z-index: 20;
}
.hour {
width: 100px;
height: 4px;
top: 216px;
left: 216px;
background-color: #000;
border-radius: 2px;
transform-origin: 0 50%;
box-shadow: 1px -3px 8px 3px #aaa;
}
.minute {
width: 130px;
height: 2px;
top: 216px;
left:216px;
background-color: #000;
transform-origin: 7.692% 50%;
box-shadow: 1px -3px 8px 1px #aaa;
}
.second {
width: 170px;
height: 1px;
top: 216px;
left: 216px;
background-color: #f60;
transform-origin: 11.765% 50%;
box-shadow: 1px -3px 7px 1px #bbb;
}
</style>
js代码
//思路是设置一个setinterval每一秒执行一次,在方法中获取时间并转换成指针的角度
<script type="text/javascript">
$(function () {
var settime = setInterval(function () {
var date = new Date()
var second = date.getSeconds()*6
var minute = date.getMinutes()*6
var hour = date.getHours()*30
//使用transform属性旋转并设置旋转中心为指针的左上角
$('.second').css("transform-origin",'0%,0%')
//因为指针初始状态是90度 所以让角度补足一圈
$('.second').css("transform","rotate("+(270+second)+"deg)")
$('.minute').css("transform-origin",'0%,0%')
$('.minute').css("transform","rotate("+(270+minute)+"deg)")
$('.hour').css("transform-origin",'0%,0%')
$('.hour').css("transform","rotate("+(270+hour)+"deg)")
},1000)
})
</script>