How to make an HTML countdown timer that resets on reload?-CodePudding

How would I go about making a countdown clock using only HTML and JS? Problem is, there are a few features that are required: • It must reset on a page reload • It must count down from a certain number of hours from page load (i.e. not a universal time)

I realize these are a lot of demands, but anything hints/tips/advice will help. Thanks in advance :]

I've tried some online timers, but they are universal and don't reset on a page reload.

CodePudding user response：

To create an HTML countdown timer that resets on reload, you can use JavaScript to track the time remaining and update the countdown display. Here is an example of how you could implement this:

<p id="timer">0:00</p>

<script>
  // Set the date we're counting down to PLUS one day for example
  var countDownDate = new Date(new Date().getTime()   (24 * 60 * 60 * 1000));

  // Update the count down every 1 second
  var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // 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);

  // Display the result in the element with id="timer"
  document.getElementById("timer").innerHTML = days   "d "   hours   "h "
    minutes   "m "   seconds   "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

This code sets a countdown date and then updates the countdown display every second. When the countdown is finished, it displays the text "EXPIRED".

CodePudding user response：

I don't know what you've tried. Here's one.

(Although, to be honest, I probably shouldn't answer a poorly written question.)


<div id="countdown"></div>
<script> {
    let remaining = { hours: 1, minutes: 0, seconds: 5 }
    
    displayRemainingTime();

    const countdownInterval = 
    setInterval( () => {

        --remaining.seconds;

        if( remaining.seconds < 0 ) {

            --remaining.minutes;

            if( remaining.minutes < 0 ) {

                --remaining.hours;

                if( remaining.hours < 0 ) {

                    clearInterval( countdownInterval );
                    displayRemainingTime();

                } else {

                    remaining.minutes = 59;
                    remaining.seconds = 59;

                }


            } else {

                remaining.seconds = 59;

            }

        }

        displayRemainingTime();

    }, 1000 );

    function displayTimerFinished() {

        document.getElementById( "countdown" ).textContent = "The timer has finished!";

    }

    function displayRemainingTime() {

        const hoursDigit = remaining.hours < 10 ? "0" : "",
            minutesDigit = remaining.minutes < 10 ? "0" : "",
            secondsDigit = remaining.seconds < 10 ? "0" : "";

        document.getElementById( "countdown" ).textContent =
            `${hoursDigit   remaining.hours}:${minutesDigit   remaining.minutes}:${secondsDigit   remaining.seconds}`;

    }

} </script>