How to make a basic HTML count-up timer
HTML is only a markup language you can’t make counter with it.
You can use javascript for this. Here’s the code you might be looking for.
- var countDownDate = localStorage.getItem('startDate');
- if (countDownDate) {
- countDownDate = new Date(countDownDate);
- } else {
- countDownDate = new Date();
- localStorage.setItem('startDate', countDownDate);
- }
- // Update the count down every 1 second
- var x = setInterval(function() {
- // Get todays date and time
- var now = new Date().getTime();
- // Find the distance between now an the count down date
- var distance = now - countDownDate.getTime();
- // Time calculations for days, hours, minutes and seconds
- var days = Math.floor(distance / (1000 * 60 * 60 * 24));
- var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
- var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
- var seconds = Math.floor((distance % (1000 * 60)) / 1000);
- // Output the result in an element with id="demo"
- document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
- }, 1000);
Artigos semelhantes
- How to make the background image of a button disappear when we click it, and make it appear on another button when we click it in Visual Studio
- How to make the input box bigger in HTML
- How to download a website (all coding HTML, CSS, JavaScript) and make a similar website in Bootstrap
- How to make HTML invisible text visible