logo

Erstellen Sie eine Stoppuhr in JavaScript

Wussten Sie, dass Sie Ihre eigene Programmiersprache erstellen können?

Das Erstellen eines Timers ist eine sehr einfache Aufgabe. Wir verwenden nur Variablen, Funktionen und DAS IST ES!

HTML Quelltext:

<html>
    <head>
        <title>JavaScript</title>

        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="stopwatch">
            00:00:00
        </div>

        <ul id="buttons">
            <li><button onclick="startTimer()">Start</button></li>
            <li><button onclick="stopTimer()">Stop</button></li>

            <li><button onclick="resetTimer()">Reset</button></li>
        </ul>

        <script src="main.js"></script>
    </body>
</html>

CSS-Code:

body {
    background: #202020;
    color: white;
}
button {
    width: 100px;
    height: 30px;
    border: 3px soldi white;
    border-radius: 50px;
    background: #202020;
    color: white;
    cursor: pointer;
    outline: none;
}

#stopwatch {
    font-size: 100px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -55%);
}
#buttons {
    position: absolute;
    top: 55%;
    left: 48.4%;
    transform: translate(-51.6%, -45%);
}
#buttons li {
    display: inline;
    padding-left: 10px;
}

JavaScript-Code:

const timer = document.getElementById('stopwatch');

var hr = 0;
var min = 0;
var sec = 0;
var stoptime = true;

function startTimer() {
  if (stoptime == true) {
        stoptime = false;
        timerCycle();
    }
}
function stopTimer() {
  if (stoptime == false) {
    stoptime = true;
  }
}

function timerCycle() {
    if (stoptime == false) {
    sec = parseInt(sec);
    min = parseInt(min);
    hr = parseInt(hr);

    sec = sec + 1;

    if (sec == 60) {
      min = min + 1;
      sec = 0;
    }
    if (min == 60) {
      hr = hr + 1;
      min = 0;
      sec = 0;
    }

    if (sec < 10 || sec == 0) {
      sec = '0' + sec;
    }
    if (min < 10 || min == 0) {
      min = '0' + min;
    }
    if (hr < 10 || hr == 0) {
      hr = '0' + hr;
    }

    timer.innerHTML = hr + ':' + min + ':' + sec;

    setTimeout("timerCycle()", 1000);
  }
}

function resetTimer() {
    timer.innerHTML = '00:00:00';
}

Bearbeiten:
Wie von 'uthx' in den Kommentaren darauf hingewiesen, müssen wir eine Funktion hinzufügen, um die Werte von sec, min und hr zurückzusetzen, wenn die Zeit zurückgesetzt wird. Wir können das tun, indem wir die folgende Funktion verwenden (Funktion codiert durch 'uthx'):

function resetTimer() {
    timer.innerHTML = "00:00:00";
    stoptime = true;
    hr = 0;
    sec = 0;
    min = 0;
}

Endergebnis:

(Natürlich funktioniert es. Selbst getestet 😉)

Erklärung

Haftungsausschluss! Im Code wirst du vielleicht bemerken, dass es „Timer“ und nicht „Stoppuhr“ heißt, weil „Timer“ kürzer als „Stoppuhr“ ist und ich keine Lust habe, das die ganze Zeit eintippen zu müssen 😂.

  • const timer = document.getElementById('stopwatch'); importiert den Timer 'div' als Variable mit seiner ID, damit wir ihn nach Belieben ändern können.
  • var hr = 0; var min = 0; var sec = 0; Wir erstellen die Stunden-, Minuten- und Sekundenvariablen und erklären, dass ihr Anfangswert 0 ist.
  • var stoptime = true; Wir erstellen eine Variable, damit wir dann überprüfen können, ob die Stoppuhr läuft oder nicht.
  • if (stoptime == true) { stoptime = false; timerCycle(); } Wenn die Stoppuhr nicht läuft, schalten Sie sie ein und gehen Sie zu timerCycle() Funktion. (Dies wird nur ausgeführt, wenn wir auf die Schaltfläche "Start" klicken)
  • if (stoptime == false) { stoptime = true; } Wenn die Stoppuhr läuft, schalten Sie sie aus. (Dies wird nur ausgeführt, wenn wir auf die Schaltfläche "Stop" klicken)
  • if (stoptime == false) { Vergewissern Sie sich, dass die Stoppuhr eingeschaltet ist.
  • sec = parseInt(sec); min = parseInt(min); hr = parseInt(hr); Diese werden verwendet, um eine Zeichenfolge in eine ganze Zahl zu zerlegen. (Wenn wir 1045 als String haben und es als Integer verwenden wollen, parsen wir es)
  • sec = sec + 1; addiere 1 zu Sekunden.
  • if (sec == 60) { wenn Sekunden gleich 60 sind, sind Minuten =1 und Sekunden werden wieder 0.
  • if (min == 60) { wenn Minuten gleich 60 sind, sind Stunden =1 und Sekunden + Minuten werden wieder 0.
  • Lustiger Teil:
if (sec < 10 || sec == 0) {
   sec = '0' + sec;
}
if (min < 10 || min == 0) {
   min = '0' + min;
}
if (hr < 10 || hr == 0) {
   hr = '0' + hr;
}

Wenn Sekunden, Minuten und/oder Stunden kleiner als 10 sind, fügen Sie eine 0 voran. Deshalb müssen wir am Anfang alles parsen:Bei dieser Operation werden sie zu Strings.

  • timer.innerHTML = hr + ':' + min + ':' + sec; addieren Sie diese Werte zum 'timer' div.
  • setTimeout("timerCycle()", 1000); Dadurch wird sichergestellt, dass ein Timeout von 1000 ms (1 s) auftritt, bevor der 'timerCycle()' wiederholt wird.
  • timer.innerHTML = '00:00:00'; verwendet, um den Timer auf 00:00:00 zurückzusetzen

UND WIR SIND FERTIG!

Erfahren Sie HIER, wie Sie als Entwickler Geld verdienen können.