Forum - Uhr mit Datum

<style>
/* Uhr Hintergrung */
 .clock_date, .title_clock, #clock_div {
  background-color: #000000;
  font-size: 20px !important;
  font-family: "arial", cursive;
  color: #eee;
  box-sizing: border-box;
}
 
/* Titel*/
.title_clock {
  text-align: center;
  margin: 10px auto;
}
 
/* Uhr */
.clock_date {  
  display:inline-block;
  border: 1px groove #aaaaaa;
  border-radius: 10px;
  padding: 1rem 2rem;
  width: auto;
  margin:  auto;
}
 
/* Uhrzeit */
#clock_div {
  display: flex;
  justify-content: center;
}
 
/* Datum */
#date_div {
  margin-top:15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
 
/* Uhrzeit Ziffern */
.square_span {
  border-radius: 10px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  margin: 1rem 2px;
  width: 50px;
  padding: 7px;
  text-align: center;
  transition: 100ms all;
}
 
/* Wochentag */
.dof_date {
  border-radius: 20%;
  background-color: #444;
  padding: 0.5rem 0.8rem;
  margin-right:20px;
}
 
/* Animation Uhrzeit */
.anim_clock {
  animation: 500ms update ease 1;
}
 
@keyframes update {
  50% {
    background-color: #444;
    transform: scale(1.1);
  }
}
</style>
 

<br>
<center>
<div class="clock_date">
  <h1 class="title_clock">Uhr mit Datum</h1>
  <div id="clock_div"></div>
  <div id="date_div"></div>
</div>
</center>
<br>
 
<script>
let date = new Date();
let prevMin = date.getMinutes();
let prevHour = date.getHours();
 
updateTime();
setInterval(() => {
  updateTime();
}, 1000);
 
function updateTime() {
  const clock = document.getElementById("clock_div");
  date = new Date();
 
  let hour = formatNum(date.getHours());
  let min = formatNum(date.getMinutes());
  let sec = formatNum(date.getSeconds());
 
  clock.innerHTML = `<span id="hour1" class="square_span">${hour}</span>
  <span id="min1" class="square_span">${min}</span>
  <span id="sec1" class="square_span anim_clock">${sec}</span>`;
 
  let dayOfWeek = formatDOF(date.getDay());
  let day = date.getDate();
  let month = formatMonth(date.getMonth());
  let year = date.getFullYear();
 
  let dateDiv = document.getElementById("date_div");
  dateDiv.innerHTML = `<span class="dof_date">${dayOfWeek}</span>
  <span>${day}. ${month} ${year}</span>`;
 
  handleChanges(hour, min);
}
 
function formatNum(num) {
  if (num < 10) num = `0${num}`;
  return num;
}
 
function formatDOF(dayOfWeek) {
  const days = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
  return days[dayOfWeek];
}
 
function formatMonth(month) {
  const months = [
  "Januar",
  "Februar",
  "März",
  "April",
  "Mai",
  "Juni",
  "Juli",
  "August",
  "September",
  "Oktober",
  "November",
  "Dezember"];
 
  return months[month];
}
 
function handleChanges(h, m) {
  const timeoutTime = 500;
  const hourSpan = document.getElementById("hour1");
  const minSpan = document.getElementById("min1");
  if (h != prevHour) {
    prevHour = h;
    hourSpan.classList.toggle("anim_clock");
    setTimeout(() => {
      hourSpan.classList.toggle("anim_clock");
    }, timeoutTime);
  }
 
  if (m != prevMin) {
    prevMin = m;
    minSpan.classList.toggle("anim_clock");
    setTimeout(() => {
      minSpan.classList.toggle("anim_clock");
    }, timeoutTime);
  }
}
</script>