首页 > 代码库 > JS时钟钟表
JS时钟钟表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.clock{
width: 600px;
height: 600px;
background: url(images/clock.jpg) no-repeat;
margin: 50px auto;
position: relative;
}
.clock div{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.h{
background: url(images/hour.png) no-repeat center center;
}
.m{
background: url(images/minute.png)no-repeat center center;
}
.s{
background: url(images/second.png)no-repeat center center;
}
</style>
</head>
<body>
<div class="clock">
<div class="h" id="hour"></div>
<div class="m" id="minute"></div>
<div class="s" id="second"></div>
</div>
<script>
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
//开启定时器
var s = 0;
var m = 0, h = 0 , ms = 0;
//开始定时器
setInterval(function(){
//写对应的时间和内容
//得到最新的时间
var date = new Date();
//获取对应的时分
ms = date.getMilliseconds(); //现在的毫秒数
//拿到秒数
s = date.getSeconds() + ms / 1000;
//拿到当前的分钟
m = date.getMinutes() + s / 60;
//拿到小时
h = date.getHours() % 12 + m / 60;
//console.log(h);
//计算旋转的角度
//一圈 360 度 一共 有 60 秒 每秒 6° 现在几乎都是秒
second.style.webkitTransform = "rotate("+ s*6 +"deg)";
minute.style.webkitTransform = "rotate("+ m*6 +"deg)";
hour.style.webkitTransform = "rotate("+ h*30 +"deg)";
second.style.MozTransform = "rotate("+ s*6 +"deg)";
minute.style.MozTransform = "rotate("+ m*6 +"deg)";
hour.style.MozTransform = "rotate("+ h*30 +"deg)";
//second.style.MozTransform
// 变化 旋转 deg 度
},100);
</script>
</body>
</html>
JS时钟钟表