Skip to content

Commit cccfaab

Browse files
committed
2 day
1 parent f2da2a7 commit cccfaab

1 file changed

Lines changed: 21 additions & 20 deletions

File tree

02 - JS + CSS Clock/index.html

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -63,34 +63,35 @@
6363
top:50%;
6464
transform-origin: 100%;
6565
transform: rotate(90deg);
66-
transition: all 0.05s;
66+
transition: all 0.5s;
6767
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
6868
}
69-
</style>
7069

71-
<script>
72-
const secondHand = document.querySelector('.second-hand');
73-
const minsHand = document.querySelector('.min-hand');
74-
const hourHand = document.querySelector('.hour-hand');
70+
</style>
7571

76-
function setDate() {
77-
const now = new Date();
72+
<script>
73+
const secondHand = document.querySelector('.second-hand');
74+
const minsHand = document.querySelector('.min-hand');
75+
const hourHand = document.querySelector('.hour-hand');
7876

79-
const seconds = now.getSeconds();
80-
const secondsDegrees = ((seconds / 60) * 360) + 90;
81-
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
77+
function setDate() {
78+
const now = new Date();
8279

83-
const mins = now.getMinutes();
84-
const minsDegrees = ((mins / 60) * 360) + 90;
85-
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
80+
const seconds = now.getSeconds();
81+
const secondsDegrees = ((seconds / 60) * 360) + 90;
82+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
8683

87-
const hour = now.getMinutes();
88-
const hourDegrees = ((mins / 12) * 360) + 90;
89-
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
90-
}
84+
const mins = now.getMinutes();
85+
const minsDegrees = ((mins / 60) * 360) + 90;
86+
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
9187

92-
setInterval(setDate, 1000);
88+
const hour = now.getHours();
89+
const hourDegrees = ((hour / 12) * 360) + 90;
90+
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
91+
console.log(mins);
92+
}
9393

94-
</script>
94+
setInterval(setDate, 1000);
95+
</script>
9596
</body>
9697
</html>

0 commit comments

Comments
 (0)