Analoge Uhr

Stay on time

Diese analoge Uhr lässt sich einfach in jeden Block von Mobirise einbauen. Die Darstellung ist reines CSS. Die Funktion JavaScript.


Skript gefunden auf codepen. Die CSS habe ich etwas angepasst.

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>
</div>

Die CSS anpassen und in den "Code Editor" in den Bereich "CSS Editor" kopieren:

.clock {
  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%;
}

Adresse

Schöne Strasse 1, Berlin

Deutschland