Auf die Rückfrage hin, ob ich die zuvor beschriebene Variante meiner simplen Stoppuhr noch weiter vereinfachen könnte, habe ich mich nochmal an den Code gesetzt und ihn etwas modifiziert. Eine allgemeine und sinnvolle Änderung ist die Positionierung der Aktionsfelder über der eigentlichen Ausgabe. Anstatt die Knöpfe zu deaktivieren, werden sie nun ausgeblendet, wodurch der Mauszeiger auf seiner aktuellen Position verweilen kann. Weiterhin wird in der neuen Variante, wie angefragt, auf eine Restart-Funktion verzichtet. Der Code hierzu findet sich im Artikel.
Ansicht der Stoppuhr
Wie in der folgenden Abbildung zu sehen ist, habe ich auf die Ausgabe der exakten Uhrzeit verzichtet, da diese primär zur Überprüfung in der vorherigen Variante genutzt wurde.
In Version 2 wird lediglich die summierte Zeit angezeigt und je nach aktuellem Zustand der zur Verfügung stehende Button.
Programmcode
<!DOCTYPE html>
<html>
<title>Stoppuhr</title>
<style>
.myWatch {
border: 1px solid black;
margin: 1rem;
padding: 1rem;
background-color: grey;
width: 25rem
}
</style>
<body>
<script>
var runTime = 0;
var startTime = 0;
function addItem(varText) {
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(varText));
document.getElementById('myLog').appendChild(entry);
}
function init() {
document.getElementById("btn_pause").style.display = "none";
}
function startWatch() {
startTime = new Date();
document.getElementById("btn_pause").style.display = 'block';
document.getElementById("btn_start").style.display = 'none';
}
function pause() {
runTime = runTime + new Date().getTime() - startTime.getTime();
addItem("Laufzeit: " + runTime / 1000 + "s");
document.getElementById("btn_start").style.display = 'block';
document.getElementById("btn_pause").style.display = 'none';
}
</script>
<div class="myWatch">
<h1>Stoppuhr</h1>
<input name="btn_start" id="btn_start" onclick="startWatch();" type="button" value="Start" />
<input name="btn_pause" id="btn_pause" onclick="pause();" type="button" value="Pause" />
<ol id="myLog"></ol>
</div>
<script>
init();
</script>
</body>
</html>