Clock实现思路
1. 首先在文档中写无个div标签，分别用来实现时钟的外形，时钟中心点，时针，分针，秒针。如下图所示：
1.png
2. 用css把时钟的外观，中心点展示出来。代码如下图所示。
2.png
3.png
3. 通过js实现时钟的刻度，并添加到时钟中。同时把时针分针，秒针的随时间变化而旋转的角度通过js实现。代码如下图所示。
4.png
4. 用css设计时针，分针，秒针的外观，并设置旋转的原点。
代码如下图所示
6.png
5.png
涉及到的特性
transform:主要是用来实现时针，分针，秒针，刻度的旋转角度
oSpan.style.transform = "rotate(" + i * 6 + "deg):是实现刻度的角度。
oHour[0].style.transform = "rotate(" + (oH * 30 + oM / 60 * 30) + "deg)"; oMin.style.transform = "rotate(" + (oM * 6 + oS / 60 * 6) + "deg)"; oSec.style.transform = "rotate(" + (oS * 6 + ms / 1000 * 6) + "deg)";
是实现时钟时针，分针，秒针随时间变化所需要选择的角度。
语法
transform:rotate()就是实现旋转具体语法参考:CSS变形、过渡和动画。在使用rotate属性的时候需要先设置元素旋转的原点。比如:transform-origin: center bottom;
需要解决的问题
- 元素与元素之间的位置，比如时钟的旋转原点需要设置在时钟的中心点。主要通过以下这几个属性实现。
width: 10px; height: 70px; margin-left: -5px; margin-top: -70px;
例子：
-
.44.png
-
.33.png
- 设置时钟的旋转角度：因为时钟圆盘一共有60个刻度，所以每隔一个刻度就是6度，那么一个小时，时针旋转30度，秒针旋转360度。
- 时针是（当前时间）6+分针/6030。一个小时内时针旋转的角度与分针旋转的角度的比例相等。分针，针跟时针是一样的原理。
oHour[0].style.transform = "rotate(" + (oH * 30 + oM / 60 * 30) + "deg)";
- 刻度的实现与添加到时钟圆盘上
- 用
document.createElement生成一个元素，通过for循环生成60个刻度。 - 用
appendChild()将生成的元素添加到文档中。
- 用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 300px;
height: 300px;
position: relative;
margin-left: 100px;
margin-top: 100px;
border-radius: 50%;
background: #655000;
border: 2px black solid;
}
.cap, .hHand, .mHand, .hour, .min, .sec {
position: absolute;
left: 50%;
background: black;
}
.cap, .hour, .min, .sec {
top: 50%;
}
.cap {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #ff45;
margin-left: -10px;
margin-top: -10px;
}
.hHand {
width: 6px;
height: 18px;
margin-left: -3px;
transform-origin: center 150px;
}
.mHand {
width: 4px;
height: 10px;
margin-left: -2px;
transform-origin: center 150px;
}
#box span em {
font-size: 20px;
width: 40px;
position: absolute;
margin-top: 20px;
left: 50%;
margin-left: -20px;
text-align: center;
font-style: normal;
}
.hour, .min, .sec {
border-radius: 70% 70% 0 0;
transform-origin: center bottom;
}
.hour {
width: 10px;
height: 70px;
margin-left: -5px;
margin-top: -70px;
}
.min {
width: 8px;
height: 90px;
margin-top: -90px;
margin-left: -4px;
}
.sec {
width: 4px;
height: 110px;
margin-left: -2px;
margin-top: -110px;
}
</style>
</head>
<body>
<div id="box">
<div class="cap"></div>
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
</body>
<script type="text/javascript">
function time() {
var oBox = document.getElementById("box");
for (var i = 0; i < 60; i++) {
var oSpan = document.createElement("span");
if (i % 5 == 0) {
oSpan.className = "hHand";
var num = i / 5 == 0 ? 12 : i / 5;
oSpan.innerHTML = "<em>" + num + "</em>";
oSpan.children[0].style.transform = "rotate(" + i * (-6) + "deg)";
} else {
oSpan.className = "mHand";
}
oSpan.style.transform = "rotate(" + i * 6 + "deg)";
oBox.appendChild(oSpan);
}
}
time();
//var oHour = document.querySelector(".hour");
var oHour = document.getElementsByClassName("hour");
//document.getElementsByClassName返回一个类数组集合->HTMLCollection->Object
console.log(oHour);
var oMin = document.querySelector(".min");
var oSec = document.querySelector(".sec");
function clock() {
var date = new Date();
var oH = date.getHours();
var oM = date.getMinutes();
var oS = date.getSeconds();
var ms = date.getMilliseconds();
oHour[0].style.transform = "rotate(" + (oH * 30 + oM / 60 * 30) + "deg)";
oMin.style.transform = "rotate(" + (oM * 6 + oS / 60 * 6) + "deg)";
oSec.style.transform = "rotate(" + (oS * 6 + ms / 1000 * 6) + "deg)";
}
clock();
setInterval(clock, 100);
</script>
</html>
网友评论