用js实现钟表作用
- HTML代码
<div id="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
2.js代码
<script type="text/javascript">
window.onload = function () {
var oh = document.getElementById("hour");
var om = document.getElementById("minute");
var os = document.getElementById("second");
function go() {
var time = new Date();
var H = time.getHours() + time.getMinutes() / 60;
var M = time.getMinutes();
var S = time.getSeconds() + time.getMilliseconds() / 1000;
os.style.transform = 'rotate(' + S * 6 + 'deg)';
om.style.transform = 'rotate(' + M * 6 + 'deg)';
oh.style.transform = 'rotate(' + H * 30 + 'deg)';
}
go();
setInterval(go, 1000);
}
</script>
3.图片样式
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 600px;
height: 600px;
}
#clock {
//空的钟表图
background: url(clock.jpg) no-repeat center center;
position: absolute;
z-index: 1;
}
#hour {
//时针的图片
background: url(hour.png) no-repeat center center;
position: absolute;
z-index: 2
}
#minute {
//分针的图片
background: url(minute.png) no-repeat center center;
position: absolute;
z-index: 3;
}
#second {
//秒针的图片
background: url(second.png) no-repeat center center;
position: absolute;
z-index: 4;
}
</style>
4.效果图如下