JavaScript Zeitbalken mit automatischer Aktualisierung?

[dagobert50gold]

Guten Abend!

Wie schaffe ich es dieses Script in eine "function name(name) {}" zu packen/umzuschreiben, sodass sie sich wie eine Uhr alle 1000 Millisekunden aktualisiert (über "onload")?

Danke!

 

[NullPointer]

Benutze setInterval.

 

[dagobert50gold]

Das hilft mir leider nicht weiter. Es geht ums umschreiben über onload. Nun weiß ich zwar wie das geht aber nicht, wie ich das "document.write" so konstruiere, dass es in einer externen .js-Datei berechnet wird und hier nur noch ein

<div id="Zeitbalken"></div>

nötig ist zum einfügen.

 

[Spartan-117]

Hallo dagobert50gold

Also, wenn ich deine Frage richtig verstanden habe, suchst du eine Möglichkeit, über JavaScript eine Uhr einzufügen.

Diese Hürde musste ich vor einigen Wochen als JavaScript und jQuery Neuling auch überwinden.

Falls du fertigen Code willst, schau weiter unten.

Ansonsten, wenn du einfach nur einen Denkanstoss willst, obwohl wahrscheinlich jeder in das Codefeld schauen würde, da ich nicht weiss wie man einen Spoiler erstellt:

- Die Funktion setInterval() und die Date Funktionen sind eigentlich alles, was du dazu brauchst.
- Dann solltest du noch bei einstelligen Werten eine 0 einsetzen.
- Ausserdem brauchst du kein document.write, eher etwas in Richtung

document.getElementById('Zeitbalken').innerHTML

(jQuery wird benötigt!)

$(function() {
	setInterval('runTime();',1000);
});
function runTime() {
	var time = new Date;
	var year = time.getFullYear();
	var month = time.getMonth() + 1;
	if(month < 10) {month = '0' + month}
	var day = time.getDate();
	if(day < 10) {day = '0' + day}
	var hour = time.getHours();
	if(hour < 10) {hour = '0' + hour}
	var minute = time.getMinutes();
	if(minute < 10) {minute = '0' + minute}
	var second = time.getSeconds();
	if(second < 10) {second = '0' + second}
	$('#Zeitbalken').html(day + '.' + month + '.' + year + ' | ' + hour + ':' + minute + ':' + second);
}

Ergebnis(als Beispiel): 23.01.2011 | 19:58:21

 

[dagobert50gold]

Nein, nein, ... Es geht mir um genau das oben verlinkte Script und speziell diese Codezeile:

document.write("<div style='width: " + Prozent + "%; background: #AAD5FF; text-align: right;'>" + Prozent + "% <\/div>");

Und genau diese Zeile will ich in einen "function ()"-Abschnitt bringen und zwar so, dass er wie alle anderen Sachen (auch meine Uhr) im body-Tag über "onload" eingelesen wird. Aktualisiert werden soll es über "window.setTimeout()".

 

[Spartan-117]

Dann wohl einfach das hier in die externe JS-Datei einfügen:

var StartDatum = "December 24, 2010"; // Format: Monat Tag, Jahr (englische Monatsnamen verwenden!)
var EndDatum  =  "December 24, 2011";

var Anfang = new Date(StartDatum).getTime();
var Prozent = Math.floor(((new Date().getTime() - Anfang) / (new Date(EndDatum).getTime() - Anfang)) * 100);
if (Prozent > 100) Prozent = 100;
if (Prozent < 1 ) Prozent = 0;
function zeigeBalken() {
document.getElementById('Zeitbalken').innerHTML = "<div style='width: " + Prozent + "%; background: #AAD5FF; text-align: right;'>" + Prozent + "% </div>";
}

Das sollte eigentlich dann funktionieren, wenn das DIV mit der ID "Zeitbalken" exisitert. Natürlich wird bei dieser Methode der ganze Text, der in dem DIV war, überschrieben.
Dieses Problem kannst du aber lösen, in dem du ein <span name="Zeitbalken2"></span> einfügst und dann im Script aus document.getElementById('Zeitbalken') ein document.getElementById('Zeitbalken2') machst.

Und dann mit window.setTimeout("zeigeBalken()", Hier Zahl einfügen); aktualisieren.

 

[dagobert50gold]

Den Text brauche ich nicht. Danke dafür, ich werde es heute Abend noch ausprobieren!

EDIT: Nach ein paar Umbauarbeiten konnte ich es so wie oben beschrieben anpassen. Dankeschön!