|
|
@@ -49,6 +49,31 @@
|
|
|
.clock li:nth-child(5n+1){
|
|
|
height: 12px;
|
|
|
}
|
|
|
+ .hour,.minute,.seconds{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ transform-origin: center bottom;
|
|
|
+ }
|
|
|
+ .hour{
|
|
|
+ width: 12px;
|
|
|
+ height: 120px;
|
|
|
+ background-color: red;
|
|
|
+ top: 80px;
|
|
|
+ }
|
|
|
+ .minute{
|
|
|
+ width: 8px;
|
|
|
+ height: 150px;
|
|
|
+ background-color: blue;
|
|
|
+ top: 50px;
|
|
|
+ }
|
|
|
+ .seconds{
|
|
|
+ width: 4px;
|
|
|
+ height: 180px;
|
|
|
+ background-color: green;
|
|
|
+ top: 20px;
|
|
|
+ /* transform: translateX(-50%) rotate(120deg); */
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -59,6 +84,9 @@
|
|
|
<li></li>
|
|
|
<li></li> -->
|
|
|
</ul>
|
|
|
+ <div class="hour"></div>
|
|
|
+ <div class="minute"></div>
|
|
|
+ <div class="seconds"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
@@ -68,6 +96,24 @@
|
|
|
str += "<li style='transform: rotate("+(i*6)+"deg);'></li>"
|
|
|
}
|
|
|
oUl.innerHTML = str;
|
|
|
+
|
|
|
+
|
|
|
+ var oSeconds = document.getElementsByClassName("seconds")[0];
|
|
|
+ var oMinute = document.getElementsByClassName("minute")[0];
|
|
|
+ var oHour = document.getElementsByClassName("hour")[0];
|
|
|
+
|
|
|
+ setInterval(function(){
|
|
|
+ var timer = new Date();
|
|
|
+ var seconds = timer.getSeconds();
|
|
|
+ var minute = timer.getMinutes();
|
|
|
+ var hour = timer.getHours();
|
|
|
+ console.log(hour);
|
|
|
+ oSeconds.style.transform = "translateX(-50%) rotate("+ (seconds*6) +"deg)";
|
|
|
+ oMinute.style.transform = "translateX(-50%) rotate("+ (minute*6) +"deg)";
|
|
|
+ oHour.style.transform = "translateX(-50%) rotate("+ (hour*30) +"deg)";
|
|
|
+
|
|
|
+ },1000);
|
|
|
+
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
