Ein einfacher HTML Timer / Countdown

Für eine interne Veranstaltung in unserem Unternehmen brauchten wir einen Countdown, der anzeigt, wie viel Zeit bis zum Beginn der Veranstaltung noch bleibt. Da wir ein internationales Unternehmen sind, musste ich mich um die verschiedenen Zeitzonen kümmern. Hier ist mein einfaches Stück Code, das in jeder Webseite verwendet werden kann, ohne zusätzliche Ressourcen oder Bibliotheken.

<style>
#clockdiv {
	background: #ebd3ce;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 20px;
	padding: 5px;
	width: 100%;
	margin-bottom: 20px;
}

#clockdiv > div {
	height: 60px;
	padding: 10px;
	display: inline-block;
}

#clockdiv div > span{
	padding: 10px;
	background: #d13d73;
	display: inline-block;
}

.clockdiv_smalltext {
	padding-top: 5px;
	font-size: 12px;
	color: #000;
}

.clockdiv_title {
	background: #ebd3ce !important;
	font-size: 30px;
	color: #000 !important;
}

</style>

<div id="clockdiv">
  <div class="clockdiv_title">
    <span class="clockdiv_title">REHAU SUMMIT</span>
    <div class="clockdiv_smalltext">Find out more <a href="./tag/rehau2020/">here.</a></div>
  </div>
  <div>
    <span class="clockdiv_days"></span>
    <div class="clockdiv_smalltext">Days</div>
  </div>
  <div>
    <span class="clockdiv_hours"></span>
    <div class="clockdiv_smalltext">Hours</div>
  </div>
  <div>
    <span class="clockdiv_minutes"></span>
    <div class="clockdiv_smalltext">Minutes</div>
  </div>
  <div>
    <span class="clockdiv_seconds"></span>
    <div class="clockdiv_smalltext">Seconds</div>
  </div>
</div>

<script>

function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));

    if(seconds <= 0) seconds = 0;
    if(minutes <= 0) minutes = 0;
    if(hours <= 0) hours = 0;
    if(days <= 0) days = 0;

    return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

function initializeClock(id, endtime) {
    var clock = document.getElementById(id);
    var daysSpan = clock.querySelector('.clockdiv_days');
    var hoursSpan = clock.querySelector('.clockdiv_hours');
    var minutesSpan = clock.querySelector('.clockdiv_minutes');
    var secondsSpan = clock.querySelector('.clockdiv_seconds');

    function updateClock() {
        var t = getTimeRemaining(endtime);

        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

        if (t.total <= 0) {
            clearInterval(timeinterval);
        }
    }

    updateClock();
    var timeinterval = setInterval(updateClock, 1000);
}

var deadline = 'April 6 2017 09:00:00 UTC+0100';
initializeClock('clockdiv', deadline);

</script>