====== Snippets: JavaScript ====== [[:snippets:start|← Zurück zu :snippets:start]] ===== Countdown ===== > **TODO:** Snippet überarbeiten! Vor allem so klein wie möglich machen, es get hier schließlich primär um den JavaScript-Code! Silvester-Countdown

Silvester-Countdown

/** * main.js: * Main JavaScript code for the countdown * Initializes the Countdown library from countdown.js * */ /** * Hide

if URL query parameter is "?hideHeader=yes" */ const urlParams = new URLSearchParams(window.location.search); const myParam = urlParams.get('hideHeader'); if (myParam == null || myParam.toLowerCase() == "yes" || myParam.toLowerCase() == "true") { const h1 = document.querySelector("h1"); h1.innerHTML = ""; h1.style.display = "none"; } else if (myParam.toLowerCase() == "no" || myParam.toLowerCase() == "false") { const h1 = document.querySelector("h1"); // Nothing to do } /** * Deadlines and messages shown after countdown */ // Weihnachten: //const deadline = (new Date()).getFullYear()+'-12-24T00:00+0100'; //const message = "Frohe Weihnachten!
\n🎅" // Neujahr: const deadline = '2026-01-01T00:00+0100'; const message = "🎉
\n" + "Frohes neues Jahr!"; /** * Initialize countdown */ Countdown.init( "countdown", // ID of countdown container deadline, // Deadline as ISO 8601 timestamp message, // Message to display after countdown finished 1 // Style (0=long, 1=short) ); /** * countdown.js * * JavaScript Countdown Library * * @url https://f.malte70.de/silvester-countdown/ */ var Countdown = { deadline: new Date(), message: null, clockStyle: 0, clock: null, init: function(id, deadline, message, clockStyle=0) { this.clock = document.getElementById(id); this.deadline = deadline; this.message = message; this.clockStyle = clockStyle; this.update(); this.timeinterval = setInterval(() => {this.update();}, 100); }, getTimeRemaining: function() { const total = Date.parse(this.deadline) - Date.parse(new Date()); const seconds = Math.floor( (total/1000) % 60 ); const minutes = Math.floor( (total/1000/60) % 60 ); const hours = Math.floor( (total/(1000*60*60)) % 24 ); const days = Math.floor( total/(1000*60*60*24) ); return { total, days, hours, minutes, seconds }; }, update: function() { const t = this.getTimeRemaining(); if (this.clockStyle == 0) { this.clock.innerHTML = 'Tage: ' + t.days + '
\n' + 'Stunden: '+ t.hours + '
\n' + 'Minuten: ' + t.minutes + '
\n' + 'Sekunden: ' + t.seconds; } else { this.clock.style.textAlign = "center"; this.clock.innerHTML = (t.hours<10 ? "0" : "") + t.hours + ":" + (t.minutes<10 ? "0" : "") + t.minutes + ":" + (t.seconds<10 ? "0" : "") + t.seconds; //this.clock.innerHTML += "." + (t.total % 1000)/10; } if (t.total <= 1000) { //if (t.total <= 200) { clearInterval(this.timeinterval); //document.querySelector("h1").innerHTML = " "; this.clock.innerHTML = this.message; } } } @charset "UTF-8"; *, *:before, *:after { box-sizing: border-box; } body { font: 20px "Source Sans Pro", sans-serif; /* f.malte70.de/colors :: metro */ background: #515151; color: #EEEEEE; } a:link, a:visited { color: #403B33; } a:hover, a:active { color: #A40114; } h1 { text-align: center; margin-top:100px; } main p { width: 300px; margin: 2em auto; font-size: 2em; } 🎆