Hoe maak je een timer met html, css en javascript?
Ik wil een simple countdowntimer gemaakt met HTML, CSS en JavaScript. Hoe maak ik dit?
3K
3K keer bekeken
Geef jouw antwoord
Antwoorden (1)
ChatGPT:
Om een timer te maken met HTML, CSS en JavaScript, kun je de volgende stappen volgen:
HTML-structuur:
<!DOCTYPE html>
<html>
<head>
<title>Timer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="timer">00:00:00</div>
<script src="script.js"></script>
</body>
</html>
CSS-styling (style.css):
#timer {
font-size: 48px;
text-align: center;
margin-top: 100px;
}
JavaScript-logica (script.js):
javascript
var seconds = 0;
var minutes = 0;
var hours = 0;
var timer;
function startTimer() {
timer = setInterval(updateTimer, 1000);
}
function updateTimer() {
seconds++;
if (seconds === 60) {
seconds = 0;
minutes++;
if (minutes === 60) {
minutes = 0;
hours++;
}
}
displayTimer();
}
function displayTimer() {
var formattedTime =
(hours < 10 ? "0" + hours : hours) +
":" +
(minutes < 10 ? "0" + minutes : minutes) +
":" +
(seconds < 10 ? "0" + seconds : seconds);
document.getElementById("timer").textContent = formattedTime;
}
function stopTimer() {
clearInterval(timer);
seconds = 0;
minutes = 0;
hours = 0;
displayTimer();
}
Met deze code kun je een timer maken met uren, minuten en seconden. De timer begint met nul en wordt elke seconde bijgewerkt. De functie startTimer() start de timer en de functie stopTimer() stopt de timer en reset deze naar nul. De timer wordt weergegeven in het timer-element in de HTML.
Als je deze bestanden (HTML, CSS en JavaScript) in dezelfde map plaatst en ze opent in een webbrowser, zou je een werkende timer moeten zien.
Om een timer te maken met HTML, CSS en JavaScript, kun je de volgende stappen volgen:
HTML-structuur:
<!DOCTYPE html>
<html>
<head>
<title>Timer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="timer">00:00:00</div>
<script src="script.js"></script>
</body>
</html>
CSS-styling (style.css):
#timer {
font-size: 48px;
text-align: center;
margin-top: 100px;
}
JavaScript-logica (script.js):
javascript
var seconds = 0;
var minutes = 0;
var hours = 0;
var timer;
function startTimer() {
timer = setInterval(updateTimer, 1000);
}
function updateTimer() {
seconds++;
if (seconds === 60) {
seconds = 0;
minutes++;
if (minutes === 60) {
minutes = 0;
hours++;
}
}
displayTimer();
}
function displayTimer() {
var formattedTime =
(hours < 10 ? "0" + hours : hours) +
":" +
(minutes < 10 ? "0" + minutes : minutes) +
":" +
(seconds < 10 ? "0" + seconds : seconds);
document.getElementById("timer").textContent = formattedTime;
}
function stopTimer() {
clearInterval(timer);
seconds = 0;
minutes = 0;
hours = 0;
displayTimer();
}
Met deze code kun je een timer maken met uren, minuten en seconden. De timer begint met nul en wordt elke seconde bijgewerkt. De functie startTimer() start de timer en de functie stopTimer() stopt de timer en reset deze naar nul. De timer wordt weergegeven in het timer-element in de HTML.
Als je deze bestanden (HTML, CSS en JavaScript) in dezelfde map plaatst en ze opent in een webbrowser, zou je een werkende timer moeten zien.
een jaar geleden
Deel jouw antwoord