Programmiererforum

Code: Select all

secondDeg = 90 + (second / 60) * 360 + 10000000000000000;
< /code>
Sie können es sehen ↓ < /p>


const secHand = document.querySelector('.second-hand');
const minHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

let secondDeg = 0,
minDeg = 0,
hourDeg = 0;

setDate();

function setDate() {
const date = new Date();
const second = date.getSeconds();
const min = date.getMinutes();
const hour = date.getHours();

secondDeg = 90 + (second / 60) * 360 + 10000000000000000;
// the init degree value of second-hand.
// When it over 100000000000000000, the clock doesn't work.
minDeg = 90 + (min / 60) * 360 + ((second / 60) / 60) * 360;
hourDeg = 90 + (hour / 12) * 360 + ((min / 60) / 12) * 360 + (((second / 60) / 60) / 12) * 360;
}

function updateDate() {
secondDeg += (1 / 60) * 360;
minDeg += ((1 / 60) / 60) * 360;
hourDeg += (((1 / 60) / 60) / 12);

secHand.style.transform = `rotate(${ secondDeg }deg)`;
minHand.style.transform = `rotate(${ minDeg }deg)`;
hourHand.style.transform = `rotate(${ hourDeg }deg)`;
}

setInterval(updateDate, 1000);< /code>
.clock {
width: 15rem;
height: 15rem;
border-radius: 50%;
background: rgba(0, 0, 0, .4);
}
.clock-face {
width: 100%;
height: 100%;
transform: translateY(-3px);
}
.hand {
width: 50%;
background: #fff;
position: absolute;
top: 50%;
right: 50%;
transform-origin: 100% 50%;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.9, 0.54, 0.26, 1.68);
}
.clock-face:after {
width: 2em;
height: 2em;
left: 50%;
top: 50%;
position: absolute;
display: block;
content: '';
background-color: #a8c5d1;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.hour-hand {
width: 40%;
height: 10px;
margin-top: -5px;
transition: all 3s;
}
.min-hand {
width: 45%;
height: 5px;
margin-top: -2.5px;
transition: all .1s;
}
.second-hand {
height: 2px;
margin-top: -1px;
background-color: red;
}< /code>