|
|
@@ -1,45 +1,76 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
<style>
|
|
|
- .box{
|
|
|
- width: 404px;
|
|
|
- height: 404px;
|
|
|
- border:2px dashed black;
|
|
|
- position: fixed;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ .box {
|
|
|
+ width: 404px;
|
|
|
+ height: 404px;
|
|
|
+ border: 2px dashed black;
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
|
- .clock{
|
|
|
+
|
|
|
+ .clock {
|
|
|
width: 400px;
|
|
|
height: 400px;
|
|
|
border: 2px solid black;
|
|
|
border-radius: 50%;
|
|
|
position: relative;
|
|
|
}
|
|
|
- .clock .tick-line{
|
|
|
+
|
|
|
+ .clock .tick-line {
|
|
|
width: 2px;
|
|
|
- height:6px;
|
|
|
+ height: 6px;
|
|
|
background-color: black;
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
transform-origin: center 200px;
|
|
|
}
|
|
|
- .clock .tick-line:nth-child(5n+1){
|
|
|
+
|
|
|
+ .clock .tick-line:nth-child(5n+1) {
|
|
|
height: 12px;
|
|
|
}
|
|
|
+
|
|
|
/* .clock .tick-line:nth-child(2){
|
|
|
transform:translateX(-50%) rotate(6deg);
|
|
|
|
|
|
|
|
|
} */
|
|
|
+ .clock .pointer div{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ transform-origin: center bottom;
|
|
|
+ transition: all 1s linear;
|
|
|
+ }
|
|
|
+ .clock .pointer .hour-pointer{
|
|
|
+ width: 20px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: blue;
|
|
|
+ top:100px;
|
|
|
+ }
|
|
|
+ .clock .pointer .minute-pointer{
|
|
|
+ width: 10px;
|
|
|
+ height: 140px;
|
|
|
+ background-color: red;
|
|
|
+ top:60px;
|
|
|
+ }
|
|
|
+ .clock .pointer .second-pointer{
|
|
|
+ width: 6px;
|
|
|
+ height: 180px;
|
|
|
+ background-color: green;
|
|
|
+ top:20px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
<div class="box">
|
|
|
<div class="clock">
|
|
|
@@ -49,24 +80,53 @@
|
|
|
<div class="tick-line"></div> -->
|
|
|
</div>
|
|
|
<!-- 指针 -->
|
|
|
- <div class="pointer"></div>
|
|
|
+ <div class="pointer">
|
|
|
+ <!-- 小时指针 -->
|
|
|
+ <div class="hour-pointer"></div>
|
|
|
+ <!-- 分钟指针 -->
|
|
|
+ <div class="minute-pointer"></div>
|
|
|
+ <!-- 秒指针 -->
|
|
|
+ <div class="second-pointer"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
// 获取元素
|
|
|
var tick = document.querySelector(".tick");
|
|
|
-
|
|
|
+ var hourPointer = document.querySelector(".hour-pointer");
|
|
|
+ var minutePointer = document.querySelector(".minute-pointer");
|
|
|
+ var secondPointer = document.querySelector(".second-pointer");
|
|
|
// 循环创建刻度线
|
|
|
- for(var i=0;i<60;i++){
|
|
|
+ for (var i = 0; i < 60; i++) {
|
|
|
// 创建刻度线元素
|
|
|
var line = document.createElement("div");
|
|
|
// 给刻度线元素添加类名
|
|
|
line.classList.add("tick-line");
|
|
|
// 给刻度线元素添加角度
|
|
|
- line.style.transform = "translateX(-50%) rotate("+i*6+"deg)";
|
|
|
+ line.style.transform = "translateX(-50%) rotate(" + i * 6 + "deg)";
|
|
|
// 给刻度线元素添加到刻度容器中
|
|
|
tick.appendChild(line);
|
|
|
}
|
|
|
+
|
|
|
+ // 实现时钟的动画
|
|
|
+ setInterval(function(){
|
|
|
+ // 获取当前时间
|
|
|
+ var time = new Date();
|
|
|
+ // 获取当前时间的小时
|
|
|
+ var hour = time.getHours();
|
|
|
+ // 获取当前时间的分钟
|
|
|
+ var minute = time.getMinutes();
|
|
|
+ // 获取当前时间的秒
|
|
|
+ var second = time.getSeconds();
|
|
|
+
|
|
|
+ // 计算秒针的角度
|
|
|
+ secondPointer.style.transform = "translateX(-50%) rotate(" + second * 6 + "deg)";
|
|
|
+ // 计算分钟针的角度
|
|
|
+ minutePointer.style.transform = "translateX(-50%) rotate(" + minute * 6 + "deg)";
|
|
|
+ // 计算小时针的角度
|
|
|
+ hourPointer.style.transform = "translateX(-50%) rotate(" + hour * 30 + "deg)";
|
|
|
+ },1000)
|
|
|
</script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
