Snippets: JavaScript

Countdown

TODO: Snippet überarbeiten! Vor allem so klein wie möglich machen, es get hier schließlich primär um den JavaScript-Code!

index.html

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width: device-width, initial-scale=1.0">
 
		<title>Silvester-Countdown</title>
 
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
		<link rel="stylesheet" href="style.css">
		<link rel="icon" type="image/svg+xml" href="favicon.svg">
	</head>
	<body>
		<main>
			<h1>
				<!--Wann ist Weihnachten?-->
				Silvester-Countdown
			</h1>
			<p id="countdown"></p>
		</main>
 
		<script src="countdown.js"></script>
		<script src="main.js"></script>
	</body>
</html>

main.js

/**
 * main.js:
 *     Main JavaScript code for the countdown
 *     Initializes the Countdown library from countdown.js
 * 
 */
 
 
 
/**
 * Hide <h1> 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!<br>\n🎅"
 
 
// Neujahr:
const deadline = '2026-01-01T00:00+0100';
const message = "🎉<br>\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

/**
 * 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 + '<br>\n' +
				'Stunden: '+ t.hours + '<br>\n' +
				'Minuten: ' + t.minutes + '<br>\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 = "&nbsp;";
			this.clock.innerHTML = this.message;
		}
	}
}

style.css

@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;
}

favicon.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<text y=".9em" font-size="90">🎆</text>
</svg>