HTML Problem mit JS für Countdown To Date

TheFirstRush · 27. Mai 2016

Hey Breadfish,

Ich habe derzeit eine website in planung, jedoch funktioniert das mit dem Countdown leider nicht ganz so wie ich möchte... Jegliche versuche die ich bisher mit javascripts in meinen html website gemacht hatte sind kläglich gescheitert.
An den Stellen wo ich jeweils DaysToDate, HoursToDate, MinutesToDate und SecondsToDate stehen habe, sollen (wie der name es ja schon sagt ) Dort Timer sein die herunterzählen. Ihr müsst keine codes schicken jedoch brauche ich bei Javascripts wirklich tierisch hilfe und daher wären codes mit viel erklärung gut.

Ich danke euch im Vorraus. Hier ist der Code:

HTML

<!-- countdown -->
<div id="countdown" class="animation-04">
  <div class="row">
    <div class="col-xs-3 col-countdown">
      <div class="countdown-section">
        <div class="countdown-amount days">DaysToDate</div>
        <div class="countdown-period days_ref">Days</div>
      </div>
    </div>
    <div class="col-xs-3 col-countdown">
      <div class="countdown-section">
        <div class="countdown-amount hours">HoursToDate</div>
        <div class="countdown-period hours_ref">Hours</div>
      </div>
    </div>
    <div class="col-xs-3 col-countdown">
      <div class="countdown-section">
        <div class="countdown-amount minutes">MinutesToDate</div>
        <div class="countdown-period minutes_ref">Minutes</div>
      </div>
    </div>
    <div class="col-xs-3 col-countdown">
      <div class="countdown-section">
        <div class="countdown-amount seconds">SecondsToDate</div>
        <div class="countdown-period seconds_ref">Seconds</div>
      </div>
    </div>
  </div>
</div>
<!-- /countdown -->

Alles anzeigen

**root** · 27. Mai 2016

Hab noch diesen alten Code hier rumliegen. Musst in anpassen an deine Namen etc.

JavaScript

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));
			return {
				'total': t,
				'days': days,
				'hours': hours,
				'minutes': minutes,
				'seconds': seconds
			};
		}


		function initializeClock(id, endtime) {
			var clock = document.getElementById(id);
			var daysSpan = clock.querySelector('.days');
			var hoursSpan = clock.querySelector('.hours');
			var minutesSpan = clock.querySelector('.minutes');
			var secondsSpan = clock.querySelector('.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);
		}

Alles anzeigen

Zum Starten:

JavaScript

<script>
var deadline = new Date("October 20, 2016 22:00:00"); //Hier enddatum
initializeClock('clockdiv', deadline);
</script>

TheFirstRush · 27. Mai 2016

Sorry dass ich der absolute noob bin. Wie leider angesprochen habe ich 0 Ahnung wie das genau geht. Kannst du mir das vielleicht ein bisschen näher erklären? Erstes mal JavaScripts nutzen. Wüsste nichtmal wo ich die einfügen muss xD

**root** · 27. Mai 2016

Hier noch ein kurzes Beispiel (mit bisschen Beschreibung) hab grad bisschen zu tun.

HTML

<!DOCTYPE HTML>
<html>
	<head>
		<title> Enterpage </title>
		<script>
		function getTimeRemaining(endtime) {
			//Berechnet die Verbleibende Zeit bis zur Endzeit
			var t = Date.parse(endtime) - Date.parse(new Date());
			//Ein paar Zeit umrechnungen
			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));
			//Gibt werte zurück
			return {
				'total': t,
				'days': days,
				'hours': hours,
				'minutes': minutes,
				'seconds': seconds
			};
		}


		function initializeClock(id, endtime) {
			var clock = document.getElementById(id); //Element Auswählen
			//Die <span> unten auslesen
			var daysSpan = clock.querySelector('.days');
			var hoursSpan = clock.querySelector('.hours');
			var minutesSpan = clock.querySelector('.minutes');
			var secondsSpan = clock.querySelector('.seconds');

			//Funktion die all Sekunde die Zeit aktualisiert
			function updateClock() {
				//Zeit von der Funktion oben hollen
				var t = getTimeRemaining(endtime);

				//Schreibt die errechnete Zeit in die spans
				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);
				//Wenn die Zeit kleiner oder 0 ist (also Zeit abgelaufen) dann beenden oder was auch immer du machen willst
				if (t.total <= 0) {
					clearInterval(timeinterval);
				}
			}
			//Funktion ausfrufen und timer setzen
			updateClock();
			var timeinterval = setInterval(updateClock, 1000);
		}
		</script>
		<style>
			body {
				min-width:100%;
				min-height:100%;
				overflow:hidden;
				background-image: url("Background.jpg");
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				text-align: center;
				font-family: sans-serif;
				font-weight: 100;
			}
			#clockdiv{
				margin-top:30px;
				font-family: sans-serif;
				color: #fff;
				display: inline-block;
				font-weight: 100;
				text-align: center;
				font-size: 50px;
			}


			#clockdiv > div{
				padding: 10px;
				border-radius: 3px;
				background: #FF0000;
				display: inline-block;
			}


			#clockdiv div > span{
				padding: 15px;
				border-radius: 3px;
				background: #BF0000;
				display: inline-block;
			}


			.smalltext{
				padding-top: 5px;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<div id="clockdiv">
			<div>
				<span class="days"></span>
				<div class="smalltext">Days</div>
			</div>
			<div>
				<span class="hours"></span>
				<div class="smalltext">Hours</div>
			</div>
			<div>
				<span class="minutes"></span>
				<div class="smalltext">Minutes</div>
			</div>
			<div>
				<span class="seconds"></span>
				<div class="smalltext">Seconds</div>
			</div>
		</div>
		<script>
		var deadline = new Date("October 20, 2016 22:00:00"); //Deadline setzen
		initializeClock('clockdiv', deadline); //funktion oben aufrufen und so die clock 'starten'
		</script>
	</body>
</html>

Alles anzeigen

TheFirstRush · 27. Mai 2016

Danke. Das hilft mir schon etwas beim verstehen

shoxinat0r	4
dennismitzwein	2
Trooper[Y]	2
maddin	1
Unbekannter Discord Kick	2

shoxinat0r	4
dennismitzwein	2
Trooper[Y]	2
maddin	1
Unbekannter Discord Kick	2

breadfish.de 12. März 2022