JavaScript Timer hochzählen
-
Verwenden Sie die Funktionen
setInterval()undMath, um den JavaScript-Count-Up-Timer anzuzeigen -
Verwenden Sie die Funktionen
setInterval()undpad(), um den JavaScript-Count-Up-Timer anzuzeigen -
Verwenden Sie
jQuery, um den JavaScript-Count-Up-Timer anzuzeigen - Verwenden Sie Objekt und Eigenschaften, um den JavaScript-Count-Up-Timer anzuzeigen
Dieses Tutorial führt Sie in den JavaScript-Count-up-Timer ein. Es verwendet die Funktionen und Objekte setInterval(), pad(), clearInterval() und Math.floor(), um einen Count-up-Timer zu erstellen.
Es zeigt auch, wie jQuery Ihnen helfen kann, Ihren Code zu optimieren.
Verwenden Sie die Funktionen setInterval() und Math, um den JavaScript-Count-Up-Timer anzuzeigen
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<div id="count_up_timer">00:00:00</div>
<button id="stop_count_up_timer" onclick="clearInterval(timerVariable)">Stop Time</button>
</body>
</html>
CSS-Code:
#count_up_timer{
font-size: 100px;
font-weight: bold;
color: darkblue;
}
#stop_count_up_timer{
background-color:black;
color:white
}
JavaScript-Code:
var timerVariable = setInterval(countUpTimer, 1000);
var totalSeconds = 0;
function countUpTimer() {
++totalSeconds;
var hour = Math.floor(totalSeconds / 3600);
var minute = Math.floor((totalSeconds - hour * 3600) / 60);
var seconds = totalSeconds - (hour * 3600 + minute * 60);
document.getElementById('count_up_timer').innerHTML =
hour + ':' + minute + ':' + seconds;
}
Ausgabe:
In diesem Codebeispiel ruft die Funktion setInterval() jede Sekunde (1 Sekunde = 1000 Millisekunden) die Funktion countUpTimer() auf. In der Funktion countUpTimer() wird die Variable totalSeconds zuerst um 1 erhöht und dann zur Umrechnung in Stunde, minute und Sekunde verwendet.
Danach wird das erste Element ausgewählt, dessen ID-Wert count_up_timer ist. Der HTML-Inhalt (innerHTML) wurde durch den Timer (Stunde:Minute:Sekunde) ersetzt. Der Count-up-Timer stoppt, sobald Sie auf die Schaltfläche Stop Timer klicken.
Die Funktion setInterval() ruft eine Funktion in einem bestimmten Intervall auf. Es braucht zwei Parameter, und beide sind erforderlich. Der erste Parameter ist eine Funktion, der andere ein Intervall in Millisekunden.
Die Methode setInterval() ruft die Funktion jedoch weiterhin auf, bis das Fenster geschlossen oder die Funktion clearInterval() aufgerufen wird. Es gibt die id der Zeit zurück, die wir mit der Funktion clearInterval() verwenden können, um den Timer zu stoppen.
Die Eigenschaft .innerHTML gibt den HTML-Inhalt des angegebenen Elements zurück oder ändert ihn. Math.floor() gibt die größte Ganzzahl zurück (kleiner oder gleich der angegebenen Zahl).
Verwenden Sie die Funktionen setInterval() und pad(), um den JavaScript-Count-Up-Timer anzuzeigen
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<h1>Count Up Timer For One Hour</h1>
<div id = "timer">
<span id="minutes"></span>:<span id="seconds"></span>
</div>
</body>
</html>
CSS-Code:
#timer{
font-size:100px;
color:green;
margin-left:80px;
}
JavaScript-Code:
var second = 0;
function pad(value) {
return value > 9 ? value : '0' + value;
}
setInterval(function() {
document.getElementById('seconds').innerHTML = pad(++second % 60);
document.getElementById('minutes').innerHTML = pad(parseInt(second / 60, 10));
}, 1000);
Ausgabe:
In diesem Beispielcode fügt die Funktion pad() eine führende Null hinzu. Es prüft, ob der ihm übergebene Wert eine einzelne Ziffer ist (kleiner oder gleich 9), dann fügt es eine führende Null hinzu, andernfalls nicht.
Die Funktion setInterval() ruft die angegebene Funktion in einem bestimmten Intervall auf. Das Intervall muss in Millisekunden angegeben werden. Sie können diesen Link besuchen, um ihn zu lesen.
Dann ruft setInterval() eine anonyme Funktion auf, um die Elemente abzurufen, deren ID-Werte Sekunden und Minuten sind. Diese anonyme Funktion ersetzt innerHTML(HTML-Inhalt) durch den Wert, der von der Funktion pad() zurückgegeben wird.
Die Funktion parseInt() parst das angegebene String-Argument und gibt eine ganze Zahl mit einem bestimmten Radix zurück.
Verwenden Sie jQuery, um den JavaScript-Count-Up-Timer anzuzeigen
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Count Up Timer For One Hour</h1>
<div id = "timer">
<span id="minutes"></span>:<span id="seconds"></span>
</div>
</body>
</html>
CSS-Code:
#timer{
font-size:100px;
color:green;
margin-left:80px;
}
JavaScript-Code:
var second = 0;
function pad(value) {
return value > 9 ? value : '0' + value;
}
setInterval(function() {
$('#seconds').html(pad(++second % 60));
$('#minutes').html(pad(parseInt(second / 60, 10)));
}, 1000);
Ausgabe:
Was ist, wenn Sie eine führende Null wünschen, aber die Funktion pad() und die jQuery-Bibliothek nicht verwenden möchten. Dann ist die folgende Lösung für Sie.
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<div id="count_up_timer">00:00:00</div>
<button id="stop_count_up_timer" onclick="clearInterval(timerVariable)">Stop Time</button>
</body>
</html>
CSS-Code:
#count_up_timer{
font-size: 100px;
font-weight: bold;
color: darkblue;
}
#stop_count_up_timer{
background-color:black;
color:white
}
JavaScript-Code:
var timerVariable = setInterval(countUpTimer, 1000);
var totalSeconds = 0;
function countUpTimer() {
++totalSeconds;
var hour = Math.floor(totalSeconds / 3600);
var minute = Math.floor((totalSeconds - hour * 3600) / 60);
var seconds = totalSeconds - (hour * 3600 + minute * 60);
if (hour < 10) hour = '0' + hour;
if (minute < 10) minute = '0' + minute;
if (seconds < 10) seconds = '0' + seconds;
document.getElementById('count_up_timer').innerHTML =
hour + ':' + minute + ':' + seconds;
}
Ausgabe:
Im obigen Code werden if-Anweisungen verwendet, um hour, minute und minutes zu prüfen. Eine führende Null wird hinzugefügt, wenn sie kleiner als 10 sind (d. h. sie sind einstellig); ansonsten nicht.
Sie haben vielleicht bemerkt, dass alle Count-up-Timer, die wir gelernt haben, starten, sobald der Code ausgeführt wird. Was wäre, wenn wir die volle Kontrolle über den JavaScript-Zähler haben könnten? Lasst uns das auch lernen.
Verwenden Sie Objekt und Eigenschaften, um den JavaScript-Count-Up-Timer anzuzeigen
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<div id="timer">
<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<div id="control">
<button id="startbtn">START</button>
<button id="pausebtn">PAUSE</button>
<button id="resumebtn">RESUME</button>
<button id="resetbtn">RESET</button>
</div>
</body>
</html>
CSS-Code:
#timer{
font-size: 100px;
font-weight: bold;
}
#control>#startbtn{
background-color:green;
color:white;
}
#control>#pausebtn{
background-color:blue;
color:white;
}
#control>#resumebtn{
background-color:orange;
color:white;
}
#control>#resetbtn{
background-color:red;
color:white;
}
JavaScript-Code:
var Clock = {
totalSeconds: 0,
startTimer: function() {
if (!this.interval) {
var self = this;
function pad(val) {
return val > 9 ? val : '0' + val;
}
this.interval = setInterval(function() {
self.totalSeconds += 1;
document.getElementById('minutes').innerHTML =
pad(Math.floor(self.totalSeconds / 60 % 60));
document.getElementById('seconds').innerHTML =
pad(parseInt(self.totalSeconds % 60));
}, 1000);
}
},
resetTimer: function() {
Clock.totalSeconds = null;
clearInterval(this.interval);
document.getElementById('minutes').innerHTML = '00';
document.getElementById('seconds').innerHTML = '00';
delete this.interval;
},
pauseTimer: function() {
clearInterval(this.interval);
delete this.interval;
},
resumeTimer: function() {
this.startTimer();
},
};
document.getElementById('startbtn').addEventListener('click', function() {
Clock.startTimer();
});
document.getElementById('pausebtn').addEventListener('click', function() {
Clock.pauseTimer();
});
document.getElementById('resumebtn').addEventListener('click', function() {
Clock.resumeTimer();
});
document.getElementById('resetbtn').addEventListener('click', function() {
Clock.resetTimer();
});
Ausgabe:
Hier haben wir ein Objekt namens Clock mit 5 Eigenschaften namens totalSeconds, startTimer, resetTimer, pauseTimer und resumeTimer erstellt. Der Wert jeder Eigenschaft ist eine anonyme Funktion mit eigenem Funktionsrumpf.
Das Schlüsselwort this bezieht sich auf ein Objekt, zu dem es gehört, und enthält immer die Referenz für ein Objekt.
Zum Beispiel bedeutet this.resumeTimer die resumeTimer-Eigenschaft des this (Clock)-Objekts.
Die Funktion clearInterval() wird verwendet, um den Count-up-Timer zu stoppen. Denken Sie daran, dass jede Eigenschaft des Clock-Objekts auf das Click-Ereignis wirkt.
