|
|
@@ -50,6 +50,37 @@
|
|
|
.clock ul li:nth-child(3){
|
|
|
transform: rotate(12deg);
|
|
|
} */
|
|
|
+
|
|
|
+ .hour{
|
|
|
+ margin-left: -5px;
|
|
|
+ margin-top: 78px;
|
|
|
+ width: 10px;
|
|
|
+ height: 120px;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ .minute{
|
|
|
+ margin-left: -4px;
|
|
|
+ width: 8px;
|
|
|
+ height: 150px;
|
|
|
+ margin-top: 48px;
|
|
|
+ background-color: blue;
|
|
|
+ }
|
|
|
+ .second{
|
|
|
+ margin-left: -3px;
|
|
|
+ width: 6px;
|
|
|
+ height: 180px;
|
|
|
+ margin-top: 18px;
|
|
|
+ background-color: green;
|
|
|
+ /* transform: rotate(30deg); */
|
|
|
+ }
|
|
|
+ .second,.hour,.minute{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top:0;
|
|
|
+ transform-origin: center bottom;
|
|
|
+ /* transform: translateX(-50%); */
|
|
|
+
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -58,11 +89,23 @@
|
|
|
<ul id="clock-item">
|
|
|
|
|
|
</ul>
|
|
|
+ <div class="hour"></div>
|
|
|
+ <div class="minute"></div>
|
|
|
+ <div class="second"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
// 获取刻度容器
|
|
|
var clickItem = document.getElementById("clock-item");
|
|
|
+ // 获取时针
|
|
|
+ var oHour = document.getElementsByClassName("hour");
|
|
|
+ oHour = oHour[0];
|
|
|
+ // 获取分针
|
|
|
+ var oMinute = document.getElementsByClassName("minute");
|
|
|
+ oMinute = oMinute[0];
|
|
|
+ // 获取秒针
|
|
|
+ var oSecond = document.getElementsByClassName("second");
|
|
|
+ oSecond = oSecond[0];
|
|
|
|
|
|
// 生成刻度
|
|
|
for(var i=0;i<60;i++){
|
|
|
@@ -73,6 +116,26 @@
|
|
|
// 将创建好的li插入容器中
|
|
|
clickItem.appendChild(oLi);
|
|
|
}
|
|
|
+
|
|
|
+ // 控制时分秒旋转
|
|
|
+ function move(){
|
|
|
+ // 获取时间对象
|
|
|
+ var now = new Date();
|
|
|
+ // 获取时分秒
|
|
|
+ var hour = now.getHours();
|
|
|
+ var minute = now.getMinutes();
|
|
|
+ var second = now.getSeconds();
|
|
|
+
|
|
|
+ // 设置旋转角度
|
|
|
+ oSecond.style.transform = "rotate("+ (second*6) +"deg)";
|
|
|
+ oMinute.style.transform = "rotate("+ (minute*6) +"deg)";
|
|
|
+ oHour.style.transform = "rotate("+ (hour*30) +"deg)";
|
|
|
+ }
|
|
|
+ move();
|
|
|
+
|
|
|
+ // 定时器每隔一秒运行一次
|
|
|
+ setInterval(move,1000);
|
|
|
+
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
