Forum - Fehlersuche: Weihnachts- und Neujahrs Countdown etwas anders! - 2

<!-- Weihnachts & Silvester-Countdown -->
<style>
.CountDownZeit {
  --fontsize: 25px;
 
  display:inline-block; 
  margin: 5px 0 2px 10px !important; 
  /* z-index:999; */
  position: relative;
  bottom:10px;
}
.zeitkontrolle {
  padding:10px;
  background: rgba(000, 000, 000, 0.5);
 
  /* Hintergrundbild Countdown-Zähler */
  /* background-image: url("https://files.homepagemodules.de/b104774/a_489_06de1da5.jpg"); */
  /* background-size: cover;*/
  
  /* Glitzerrand */
  /* border: 1px solid #0e0e0f;
      border-image-source: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      border-image-slice: 3%; */
        
  border-radius:9px;     
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  width: fit-content;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
  font-weight: bold; 
  color: rgb(230,230,230);
  vertical-align: top;
}
.zeitkontrolle > .part {
  padding: calc(var(--fontsize) / 5);
  display: grid;
  gap: 0.5rem;
}
.zeitkontrolle > .part > .number {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #aaaaaa;
  border: 2px solid hsl(0 0% 50% / .3);
  font-size: var(--fontsize);
  position: relative;
  text-shadow: 0 0 0.05em #aa0000, 0 0 0.1em black;
  }
.zeitkontrolle > .part.Tage { --num: 365 }
.zeitkontrolle > .part.Stunden { --num: 24 }
.zeitkontrolle > .part:where(.Minuten, .Sekunden) { --num: 60 }
.zeitkontrolle > .part > .number::after{
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -0.5);
  border-radius: inherit;
  --degree: calc(360deg / var(--num) * (var(--num) - var(--value,0)));
  background-image: conic-gradient(var(--accent) var(--degree), transparent calc(var(--degree) + 0.1deg));
  --border-size: 4px;  
  --mask-image: radial-gradient(100% 100%, transparent calc(50% - var(--border-size)), black calc(50% - var(--border-size) + 1px));
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}
.zeitkontrolle > .part > .text {
  width: calc(var(--fontsize)*3.3);
  background: rgb(200, 200, 200);
  border:1px solid #383838;
  border-radius: 3px;
  font-size: calc(var(--fontsize)/1.8);
  font-weight: bold;
  color: #383838;
  padding: 1px 10px;
  text-align: center;
} 
 
/* 3D-Überschrift */
/* h2.TextUe {
  font: bold var(--fontsize) Arial !important;
  color: #eeeeee !important;
  letter-spacing: 10px;
  text-transform: uppercase;
  text-shadow: 
    1px 1px 1px #919191,
    1px 2px 1px #919191,
    1px 3px 1px #919191,
    1px 4px 1px #919191,
    1px 5px 1px #919191,
    1px 6px 1px #919191,
    1px 9px 6px rgba(16,16,16,0.4),
    1px 11px 10px rgba(16,16,16,0.2),
    1px 13px 35px rgba(16,16,16,0.2),
    1px 15px 60px rgba(16,16,16,0.4);
} */
 
/* Überschrift mit Glitzereffekt */
h2.TextUe {
      background: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-text-stroke: 1px #403d37;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: rgb(64, 61, 55);
     font: bold calc(var(--fontsize)*1.6) VERDANA,ARIAL,HELVETICA !important;
     color: #ffffff !important;
     letter-spacing: 1px;
     text-transform: uppercase;
} 
</style>
 
<script>
window.addEventListener('load', function(){
 
$('.xFeedContainer, #activity_feed').before(`
  <center>
    <div class="CountDownZeit">
      <h2 class="TextUe">Weihnachten 2023</h2>
      <div class="zeitkontrolle" date-time="2023-12-24" end-time="2023-12-27" style="--accent: #a10a06"><div class="expired" style="display:none;">
	  
            <!-- Glückwünsche zum Ereignis -->
	    <img height="300px;" src="https://files.homepagemodules.de/b104774/f25t1341p3322n2_sUwZRXED.jpg">
		
      </div></div>
	</div>
 
    <div class="CountDownZeit">
      <h2 class="TextUe">Neujahr 2024</h2>
      <div class="zeitkontrolle" date-time="2024-01-01" end-time="2024-01-02" style="--accent: #0a9006"><div class="expired" style="display:none;">
 
	    <!-- Glückwünsche zum Ereignis -->
	    <img height="300px;" src="https://files.homepagemodules.de/b104774/a_664_4a8e40de.png">
		
	  </div></div>
    </div>
  </center>
`);
 
class zeitkontrolle {
 
  constructor(el){
    this.el = el;
    this.targetDate = new Date(el.getAttribute("date-time"))
    this.endDate = new Date(el.getAttribute("end-time"))
    this.createzeitkontrolleParts()
    this.zeitkontrolleFunction();
    this.zeitkontrolleLoopId = setInterval(this.zeitkontrolleFunction.bind(this), 1000)
 
    var now = new Date()
    var distance = this.targetDate - now;
    var distanceEnd = this.endDate - now;
 
    if (distance < 0) {
      this.el.classList.add('mystyle');
      $('.mystyle .part').hide();
      $('.mystyle .expired').show();
    }
    if (distanceEnd < 0) {
      this.el.classList.add('mystyleEnd');
      $('.mystyleEnd').closest('.CountDownZeit').hide();
    }
  }
 
  createzeitkontrolleParts(){
    ["Tage", "Stunden", "Minuten", "Sekunden"].forEach(part => {
      const partEl = document.createElement("div");
      partEl.classList.add("part", part);
      const textEl = document.createElement("div");
      textEl.classList.add("text");
      textEl.innerText = part;
      const numberEl = document.createElement("div");
      numberEl.classList.add("number");
      numberEl.innerText = 0;
      partEl.append(numberEl, textEl);
      this.el.append(partEl);
      this[part] = numberEl;
    })
  }
 
  zeitkontrolleFunction(){
    const currentDate = new Date();    
    if(currentDate > this.targetDate) return clearInterval(this.intervalId);
    const remaining = this.getRemaining(this.targetDate, currentDate);
    Object.entries(remaining).forEach(([part,value]) => {
      this[part].style.setProperty("--value", value)
      this[part].innerText = value
 
    }) 
  }
 
  getRemaining(target, now){
    let Sekunden = Math.floor((target - (now))/1000);
    let Minuten = Math.floor(Sekunden/60);
    let Stunden = Math.floor(Minuten/60);
    let Tage = Math.floor(Stunden/24);
    Stunden = Stunden-(Tage*24);
    Minuten = Minuten-(Tage*24*60)-(Stunden*60);
    Sekunden = Sekunden-(Tage*24*60*60)-(Stunden*60*60)-(Minuten*60);
    return { Tage, Stunden, Minuten, Sekunden }      
  }
 
}
const zeitkontrolleEls= document.querySelectorAll(".zeitkontrolle") || [];
zeitkontrolleEls.forEach(zeitkontrolleEl => new zeitkontrolle(zeitkontrolleEl))
});
</script>