Back to frontpage
Hét vraag- en antwoordplatform van Nederland

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?

20513
een jaar geleden
2.7K
Ikhebgeenidee
een jaar geleden
Eerste zoekresultaat met Google:
https://www.w3schools.com/howto/howto_js_countdown.asp

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

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.
(Lees meer...)
SimonV
een jaar geleden

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 5000
Gekozen afbeelding
+