Einbau in dieser Mobirise Seite:Das JavaScript zur Funktion der Uhr in die
> Seiteneinstellungen > "Ende of <body> code":<script>
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();
</script>
Die Anzeige der Uhr in den "Code Editor" anstelle eines Beispieltextes kopieren:<div class="clock">
<div class="outer-clock-face">
<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
<div class="inner-clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
Die CSS anpassen und in den "Code Editor" in den Bereich "CSS Editor" kopieren: width: 15rem;
height: 15rem;
border: 7px solid #545271;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 0.2rem;
-webkit-box-shadow: 0 20px 30px rgba(104, 75, 106, 0.65);
-moz-box-shadow: 0 20px 30px rgba(104, 75, 106, 0.65);
box-shadow: 0 20px 30px rgba(104, 75, 106, 0.65);
background: #545271;
}
.outer-clock-face {
position: relative;
width: 100%;
height: 100%;
border-radius: 100%;
background: #fefefc;
-webkit-box-shadow: 0 20px 10px rgba(62, 47, 63, 0.45);
-moz-box-shadow: 0 20px 10px rgba(62, 47, 63, 0.45);
box-shadow: 0 20px 10px rgba(62, 47, 63, 0.45);
overflow: hidden;
}
.outer-clock-face::after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.outer-clock-face::before, .outer-clock-face::after, .outer-clock-face .marking {
content: '';
position: absolute;
width: 6px;
height: 100%;
background: #b8b8c5;
z-index: 0;
left: 49%;
}
.outer-clock-face .marking {
background: #bdbdcb;
width: 3px;
}
.outer-clock-face .marking.marking-one {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
.outer-clock-face .marking.marking-two {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
.outer-clock-face .marking.marking-three {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg);
}
.outer-clock-face .marking.marking-four {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
transform: rotate(150deg);
}
.inner-clock-face {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background: #fefefc;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 1;
}
.inner-clock-face::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 18px;
margin-left: -9px;
margin-top: -6px;
background: #4d4b63;
z-index: 11;
}
.hand {
width: 50%;
right: 50%;
height: 8px;
background: #61afff;
position: absolute;
top: 50%;
border-radius: 6px;
transform-origin: 100%;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hand.hour-hand {
width: 30%;
z-index: 3;
}
.hand.min-hand {
height: 5px;
z-index: 10;
width: 40%;
}
.hand.second-hand {
height: 2px;
background: #ff5e5e;
width: 49%;
}
