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

[FRAGE] Timer....

P

proxxcore

New member
Hi!

Ich bin schon fast am verzweifeln, weil ich einfach nichts finde, was dem entspricht, was ich suche :(

Bin leider in javascript und jquery ein kompletter anfänger...

Eine Tabelle, wo verschiedene sachen drin sind soll mir nebenbei die Zeit anzeigen lassen, welche VERGANGEN ist, seitdem der button gedrückt wurde. es ist ein submit button, der auch noch andere daten übermittelt und in der datenbank speichert - daneben soll einfach in einem textfeld die zeit hochzählen in HH:MM:SS ^^

kann mir wer mit javascript behilflich sein, bitte ?

lg px
 
proxxcore schrieb:
Hi!
Eine Tabelle, wo verschiedene sachen drin sind soll mir nebenbei die Zeit anzeigen lassen, welche VERGANGEN ist, seitdem der button gedrückt wurde. es ist ein submit button, der auch noch andere daten übermittelt und in der datenbank speichert - daneben soll einfach in einem textfeld die zeit hochzählen in HH:MM:SS ^^
Zum Vergrößern anklicken....

Also: Du hast ein Formular in HTML mit einer Tabelle. Beim Klicken auf einen Knopf wird das Formular abgesendet, der empfangende Server trägt die Daten in eine Datenbank ein.
Du benötigst ein Element, indem die Zeit angezeigt wird, die Seit Seitenladen (=letzer submit) vergangen ist. Dieses Element soll per JS seinen Inhalt bekommen.
Richtig?

Erstmal, das Element:
HTML: 
<div id="zeit"></div>

Dann das JS:
HTML: 
<script></script>
Darin bei Seitenladen die aktuelle Zeit speichern mit var zeit=+new Date();
Dann die Update-Funktion: function updateTime(){}
Darin die Differnz zwischen der aktuellen Zeit und der Aufrufzeit berechnen: var diff=format(+new Date()-zeit);
Und Ausgeben: document.getElementById('zeit').innerHTML=diff;
Schließlich die Funktion sekündlich aufrufen:setTimeout(updateTime,1000);
Die Funktion beim Seitenladen aufrufen:
HTML: 
<body onload="javascript:updateTime()">
Die Funktion format musst du dir selbst schreiben, die muss die Sekunden in das gewünschte Format umwandeln. TIPP: Nutze Modulo (% Operator) und arbeite von Sekunden bis Stunden!
 
paul schmitz schrieb:
var zeit=+new Date();
Zum Vergrößern anklicken....
Ich finde Date.now() um einiges schöner und eleganter... und nebenbei sollte es auch performanter sein.
paul schmitz schrieb:
Schließlich die Funktion sekündlich aufrufen
Zum Vergrößern anklicken....
Das wird unweigerlich zu unschönen Ergebnissen führen, da die Sekunde nicht genau eingehalten wird. Dadurch springt das dann manchmal gar nicht und manchmal um zwei Sekunden.

paul schmitz schrieb:
HTML: 
<body onload="javascript:updateTime()">
Zum Vergrößern anklicken....
Das javascript: ist überflüssig.
 
kkapsner schrieb:
Das wird unweigerlich zu unschönen Ergebnissen führen, da die Sekunde nicht genau eingehalten wird. Dadurch springt das dann manchmal gar nicht und manchmal um zwei Sekunden.
Zum Vergrößern anklicken....

Dem stimme ich nicht zu. Wenn das Aufrufen z.B. 20ms später passiert, als das Initialisieren, springt der in der Mitte der Sekunde um, das sollte passen. Um ganz sicher zu gehen, einfach die Funktion 10x pro Sekunde oder so aufrufen.
Sonst hast du aber recht.
 
paul schmitz schrieb:
Dem stimme ich nicht zu.
Zum Vergrößern anklicken....
Schau's dir an (mal zwischendurch in ein anderes Fenster wechseln oder die CPU mit irgendwas beschäftigen, dann sieht man das Problem besser):
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body>
Anzeige: <span id="timer"></span><br>
Offset: <span id="offset"></span>ms
<script type="text/javascript">
(function(){
	var start = Date.now();
	function tick(){
		var now = Date.now();
		document.getElementById("timer").innerHTML = Math.floor((now - start) / 1000);
		document.getElementById("offset").innerHTML = (now - start) % 1000;
		window.setTimeout(tick, 1000);
	}
	tick();
}());
</script>
</body>
</html>
Der Offset sagt dir, um wieviel zu spät die Funtion ausgeführt wurde. Die Fehler summieren sich hier einfach und wenn man über 1000 kommt, wird um zwei Sekunden hochgezählt. setTimeout hält sich einfach nicht 100%ig an die Zeitangabe (wobei das mit den neueren Browserversionen anscheinend besser geworden ist. Ich kann mich erinnern, dass das mal viel schlimmer war).

Einfacher Trick, um dieses Problem zu umgehen:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body>
Anzeige: <span id="timer"></span><br>
Offset: <span id="offset"></span>ms
<script type="text/javascript">
(function(){
	var start = Date.now();
	function tick(){
		var now = Date.now();
		document.getElementById("timer").innerHTML = Math.floor((now - start) / 1000);
		document.getElementById("offset").innerHTML = (now - start) % 1000;
		window.setTimeout(tick, 1000 - (now - start) % 1000);
	}
	tick();
}());
</script>
</body>
</html>

paul schmitz schrieb:
Um ganz sicher zu gehen, einfach die Funktion 10x pro Sekunde oder so aufrufen.
Zum Vergrößern anklicken....
Dann rufst du sie nicht mehr sekündlich auf... ;)
 
Bei mir halten sich die Fehler in Grenzen, erst nach etwa einer halben Stunde trat das Problem auf (~80% Rechnerauslastung). Aber Danke für die Demonstration und vor allem für die Lösung, die ja recht simpel erscheint - es kann ja ganz einfach sein.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben