• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Bootstrap: Countdown mit ProgressBar

T

thecodingnoob

New member
Hallo,

Ich bin JavaScript Anfänger und hab ne wahrscheinlich zieeemlich dumme Frage :D
und zwar:

Ich möchte einen Countdown mit JavaScript erstellen der mit einer Bootsrap ProgressBar schön dargestellt werden soll..

Das mit dem "schön darstellen" ist kein Problem aber wie bekomm ich den *** Countdown hin...
Ich hab absolut keinen Plan :( Alles was ich hinbekommen will ist, dass am 1.7.2015 z.B die Progress Bar auf 100% ist...

Kann mir irgendjemand helfen?

Danke im Vorraus :)
 
Du kannst mit dem Date() Objekt die verbleibenden Tage zwischen dem Datum des Clients und dem Zieldatum ermitteln. Ich betone das Datum des Clients, weil du ansonsten mit einem kleinen Serverscript das Datum vom Server holen müsstest. Wenn also jemand auf seinem PC das falsche Datum hat und deine Seite besucht bekommt er nicht das gewünschte Ergebnis. Wie wichtig das richtige Ergebnis ist kann ich nicht beurteilen.

Doku auf Deutsch: JavaScript/Objekte/Date
Englisch: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date

Und mit einem Dreisatz kannst du daraus die Breite der Progress Bar errechnen.

Schau mal, ob das hilft, sonst frag hier gern nochmal nach.
Und außerdem gibt es keine dummen Fragen sondern nur dumme Antworten :)
 
Vielen Dank! Deine Antwort hat mir sehr geholfen :)

Leider hab ich beim stellen der Frage einen kleinen Fehler gemacht:

Und zwar soll es eigentlich so sein, dass um 14 Uhr 0% und um 16 Uhr 100% sind..
Also nur eine Zeitspanne von 2 Stunden...

Das Datum muss nicht unbedingt vom Server sein, das vom PC des Nutzers reicht aus.

Danke nochmal, MfG
 
Ja, ok, mit dem Date() Objekt verarbeitet man ja auch Uhrzeiten. Schön, dass ich helfen konnte. Wie sieht denn jetzt dein fertiger Code aus?
 
HTML: 
<script type="text/javascript">
			//=== CONFIG ===
			var startHour = 19;
			var endHour = 23;
			
		
			//ID der Progress-Bar
			var progressBarID = "time-progress-bar";
			
			var updateInterval = 1000;
			
			var debug = false;
			//==============
			
			function updateProgressBar() {
				var timeProgressBar = $("#" + progressBarID);
				
				var progress = 0;
				
				var date = new Date();
				var hour = date.getHours();
				var minutes = date.getMinutes();
				
				var minutesFromStart = 0;
				
				if(hour >= startHour && hour < endHour) {
					for(i = startHour + 1; i < endHour; i++) {
						if(hour >= i) minutesFromStart += 60;
					}
					
					minutesFromStart += minutes;
					
					progress = (100 / ((endHour - startHour) * 60)) * minutesFromStart;
				} else if(hour < startHour) {
					progress = 0;
				} else if(hour >= endHour) {
					progress = 100;
				}
				
				timeProgressBar.css("width",  progress + "%");
				
				if(debug) console.log(hour + ", " + minutes + ": " + progress + "(" + minutesFromStart + ")");
			}
			
			setInterval(updateProgressBar, updateInterval);
		</script>

so siehts jetzt aus...
Dann noch das im Body Bereich:

HTML: 
<body onLoad="updateProgressBar()">

	<div class="progress">
			<div id="time-progress-bar" class="progress-bar progress-bar-danger progress-bar-striped active"
       role="progressbar" style="width: 0%;"></div>
			<div id="time"></div>
		</div>

- - - Aktualisiert - - -

Wegen dem Like geh ich mal davon aus das es einigermaßen richtig gemacht ist. :D
 
Zuletzt bearbeitet von einem Moderator:
Das Like bedeutet erstmal nur Danke, dass du den Code zeigst und damit der Community etwas zurück gibst.

Wenn es ansonsten funktioniert und in der Konsole keine Meldungen stehen sollte es grundsätzlich in Ordnung sein.

Punkte die ich dennoch anders machen würde:
  • keine globalen Variablen verwenden (am besten das ganze einfach kapseln mit (function(){}))
  • mit "use strict"; arbeiten
  • nicht mit setInterval() arbeiten sondern die Funktion sich bei Erfolg selbst erneut aufrufen lassen nach einer definierten Zeit mit setTimeout()
  • nur <script> statt <script type="text/javascript"> schreiben
  • den Eventhandler onload klein schreiben
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben