<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clock {
width: 600px;
height: 600px;
margin: 100px auto;
background: url(images/clock.jpg) no-repeat;
position: relative;
}
.clock div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(images/hour.png) no-repeat center center;
}
#m {
background-image: url(images/minute.png);
}
#s {
background-image: url(images/second.png);
}
</style>
</head>
<body>
<div class="clock">
<div id="h">10</div>
<div id="m">10</div>
<div id="s">10</div>
</div>
<script>
/*机械表与电子表区别
1.走字速度
* 电子表： 1秒钟走字1次
* 机械表：1秒种走字6次
2.机械表比电子表更加精准 ： 考虑毫秒
*/
//获取界面元素
var hDiv = document.getElementById('h');
var mDiv = document.getElementById('m');
var sDiv = document.getElementById('s');
//由于定时器会在1s之后才执行，所以刚进入页面会有1s的顿闪现象
//解决方案：一进入页面，走一次字
zouZi();
//1.开启定时器
setInterval(function ( ) {
zouZi();
},10);
function zouZi ( ) {
//2.1 获取当前时间
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var ms = date.getMilliseconds();
//2.2 根据当前时间计算时分秒角度 1s =1000ms
var sDeg = s * 6 + ms/1000 * 6;
var mDeg = (m+s/60)*6;
var hDeg = (h+m/60+s/3600)*30;
//2.3 将计算好的角度赋值给页面元素
sDiv.style.transform = 'rotate(' + sDeg + 'deg)';
mDiv.style.transform = 'rotate(' + mDeg + 'deg)';
hDiv.style.transform = 'rotate(' + hDeg + 'deg)';
}
</script>
</body>
扫一扫
1843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
