Vor einigen Tagen habe ich ein kleines JavaScript für ein Formular geschrieben, das zur Erfassung von Tätigkeitsdauern genutzt wird. Das Design und die Funktionsweise ist sehr rudimentär gehalten, da keine genauen Anforderungen diesbezüglich spezifiziert wurden.
Die folgende Abbildung zeigt die exemplarische Anwendung von Start, Pause, Start, Pause und Ende. Danach beschreibe ich die grundlegenden Ideen hinter meiner Implementierung und den vollständigen Code.
Im folgenden Listing ist der vereinfachte HTML-Code und das entsprechende JavaScript aufgeführt. Mit einer Start-Pause-Funktion ist es möglich Unterbrechungen abzubilden. Die Steuerelemente werden dynamisch aktiviert und deaktiviert. Dies geschieht in Abhängigkeit der jeweiligen Zustände. Da das vordefinierte Formular ein paar technische Herausforderungen beinhaltet, habe ich mich gegen eine visuelle Repräsentation mit automatischer Aktualisierung entschieden. Stattdessen werden Zeitstempel gespeichert und angezeigt, um zeitliche Differenzen abzubilden.
<!DOCTYPE html>
<html>
<title>Stoppuhr</title>
<body>
<script>
function addItem(varText) {
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(varText));
document.getElementById('myLog').appendChild(entry);
}
function disableButtons(bStart, bPause, bEnd, bRestart) {
document.getElementById("btn_start").disabled = bStart;
document.getElementById("btn_pause").disabled = bPause;
document.getElementById("btn_end").disabled = bEnd;
document.getElementById("btn_restart").disabled = bRestart;
}
function restart() {
runTime = 0;
start();
}
function start() {
startTime = new Date();
addItem("Start:" + new Date());
disableButtons(true, false, false, true);
runState = 0;
}
function pause() {
runTime = runTime + new Date().getTime() - startTime.getTime();
addItem("Pause: " + new Date());
addItem("Laufzeit: " + runTime / 1000 + "s");
disableButtons(false, true, false, true);
runState = 1;
}
function end() {
if (runState==0){
runTime = runTime + new Date().getTime() - startTime.getTime()};
if (runState==1){
//
}
addItem("Ende: " + new Date());
addItem("Laufzeit: " + runTime / 1000 + "s bzw. " + runTime / 60000 + "m");
addItem("Aufgerundet: " + Math.ceil(runTime / 60000) + "m");
disableButtons(true, true, true, false);
runState=2;
}
</script>
<h1>Laufzeit</h1>
<ol id="myLog"></ol>
<input name="btn_start" id="btn_start" onclick="start();" type="button" value="Start" />
<input name="btn_pause" id="btn_pause" onclick="pause();" type="button" value="Pause" />
<input name="btn_end" id="btn_end" onclick="end();" type="button" value="Ende" />
<input name="btn_restart" id="btn_restart" onclick="restart();" type="button" value="Restart" />
<script>
var runTime;
var startTime;
var runState;
restart();
</script>
</body>
</html>Die folgende Abbildung zeigt die definierten Zustände meiner Stoppuhr. An dieser Stelle ist zu sagen, dass die Implementierung der Funktionen sicherlich besser machbar ist, aber für die definierten Anforderungen ausreichend ist.
