Sekundenzähler stoppen und Starten
0 
Tobias Hahner
0 
Felix Riesterer
1
Sekundenzähler stoppen und Starten
hi, ich bin grad beim Lernen von Javascript auf folgendes Problem gestoßen: Ich will einen Sekundenzähler machen, den man starten und Stoppen kann, nur weiß ich nich wie man das machen muss, ich hab schon probiert mit funktionen die Variable ss zu verändern:
HTML:
<html>
<head>
<title>Sekundenzähler</title>
<link href="zaehler.css" type="text/css" rel="stylesheet" />
<script src="zaehler.js" type="text/javascript"></script>
</head>
<body>
<div id="zbox">
<p>
<div id="szaehler">0 Sekunden</div>
<div id="mzaehler">0 Minuten</div>
<a class="no" href="javascript:start();"><div id="startb"></div></a>
<a class="no" href="javascript:stop();"><div id="stopb"></div></a>
</p>
</div>
</body>
</html>
JS:
function zaehler() {
if (ss == true) {
s++;
if (s >= 60) {
s = 0;
m++;
if (m == 1) {
document.getElementById("mzaehler").innerHTML = m + " Minute";
} else {
document.getElementById("mzaehler").innerHTML = m + " Minuten";
}
}
if (s == 1) {
document.getElementById("szaehler").innerHTML = s + " Sekunde";
} else {
document.getElementById("szaehler").innerHTML = s + " Sekunden";
}
}
}
var ss == false;
var s = 0;
var m = 0;
function start() {
ss == true;
zaehler();
}
function stop() {
ss == false;
}
setInterval("zaehler()", 1000);
Was mach ich Falsch.
Danke!
-
Hallihallo!
» function zaehler() { > if (ss == true) { > s++; > if (s >= 60) { > s = 0; > m++; > if (m == 1) { > document.getElementById("mzaehler").innerHTML = m + " Minute"; > } else { > document.getElementById("mzaehler").innerHTML = m + " Minuten"; > } > } > if (s == 1) { > document.getElementById("szaehler").innerHTML = s + " Sekunde"; > } else { > document.getElementById("szaehler").innerHTML = s + " Sekunden"; > } > } > } > function start() { > ss == true; // ------^ // hier möchtest Du keinen Vergleich, sondern eine Zuweisung > zaehler(); > } > > function stop() { > ss == false; > } > > var ss == false; // ------^ // hier möchtest Du keinen Vergleich, sondern eine Zuweisung > var s = 0; > var m = 0; > > setInterval("zaehler()", 1000);Für die Lesbarkeit des Codes habe ich mir angewöhnt, Funktionen räumlich vom "Hauptteil" zu trennen.
Das habe ich hier mal auch getan.
Die beiden markierten Stellen sind mir direkt ins Auge gesprungen, getestet habe ich den Code nicht.
Daher keine Garantie, dass es so funktioniert :)Darüberhinaus böte es sich meiner Meinung nach an, das Intervall in der Startfunktion zu definieren, statt es immer laufen zu lassen. Dementsprechend die stop- Funktion so erweitern, dass sie das Intervall "cleart"
Beste Grüsse,
Tobias Hahner -
Lieber B4rnY,
Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
Moin!
function zaehler() {
if (ss == true) {
s++;
}
}setInterval("zaehler()", 1000);
Es ist eine schlechte Idee, die Sekunden durch deine Zählfunktion hochzuzählen, die im vermeintlichen Sekundentakt aufgerufen wird. So eine "Uhr" wird schon nach kurzer Zeit ziemlich falsch gehen, weil Javascript im Browser nicht parallele Tasks ausführt, und das Timing von setTimeout bzw. setInterval extrem davon abhängt, was sonst noch so auf der Seite zu tun ist. Außerdem ist die Ausführungszeit des Skriptes zu berücksichtigen.
Unter dem Strich würde die Zählfunktion also nicht exakt alle 1000 Millisekunden aufgerufen, sondern tendentiell vielleicht alle 1015 bis 1063 Millisekunden - das ist immerhin eine Abweichung von 1 bis 6 %.
Die bessere Idee ist es, die Computeruhr einzusetzen zur Zeitzählung. Dazu merkt man sich in einem Date-Objekt die Uhrzeit des Starts und errechnet zu jedem Skriptdurchlauf dann die seitdem vergangene Zeit. Wenn die Uhranzeige dann nicht sekundengenau aktualisiert wird, macht das nichts - dann springt halt die Zeitanzeige mal nicht sekundengenau um, läuft aber trotzdem sekundengenau weiter.
- Sven Rautenberg