JS动态时钟:
1.html代码展示:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>时钟</title>
<style>
.clock{
margin: 200px auto;
position: relative;
width:1024px;
height:1024px;
background: url(img/time.png) no-repeat;
}
#hour{
position: absolute;
z-index: 7;
top:193px;
left:494px;
width: 35px;
height: 403px;
transform-origin:center 317px;
}
#minute{
position: absolute;
z-index:8;
top:52px;
left:493px;
width: 36px;
height: 546px;
transform-origin:center 460px;
}
#second{
position: absolute;
z-index: 9;
top:40px;
left:465px;
width: 95px;
height: 559px;
transform-origin:center 473px;
}
</style>
</head>
<body>
<div class="clock">
<div id="hour"><img src="img/hour.png" alt=""/></div>
<div id="minute"><img src="img/minute.png" alt=""/></div>
<div id="second"><img src="img/second.png" alt=""/></div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/clock.js"></script>
<!--<script src="js/clock1.js"></script>-->
</body>
</html>
2.JS代码展示:
实现时钟不停转动:
$(function(){
function clock(){
// 当前时间
var now = new Date();
// 午夜12点整
var midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
// 当前时间与午夜12点之间的毫秒差
var ms = now.getTime() - midnight.getTime();
// 计算时、分、秒
var hh = ms / (1000 * 60 * 60);
var mm = hh * 60;
var ss = mm * 60;
//console.log(hh);
//console.log(ms);
// 实现时钟旋转
$("#hour").css("transform","rotate(" + (hh * 30) + "deg)");
$("#minute").css("transform","rotate(" + (mm * 6) + "deg)");
$("#second").css("transform","rotate(" + (ss * 6) + "deg)");
}
setInterval(clock);
});
实现时钟机械试转动(1秒动一次):
$(function(){
function clock(){
// 当前时间
var now = new Date();
// 计算时、分、秒
var hh = now.getHours();
var mm = now.getMinutes();
var ss = now.getSeconds();
console.log(hh);
// 实现时钟旋转
$("#hour").css("transform","rotate(" + (hh * 30+(mm/60*30))+ "deg)");
$("#minute").css("transform","rotate(" + (mm * 6+(ss/60*6))+ "deg)");
$("#second").css("transform","rotate(" + (ss * 6) + "deg)");
}
setInterval(clock);
});