Question 199131 in Html Question posted in
Some basic documentation can be found here.

How to create a timer in html which starts from same position each time when website is opened

I have written html code with a timer, but I need a script for it to countdown. I researched a lot in the internet and couldn’t find anything that could help me. Maybe someone has experience with this kind of thing here and can help me. I need this timer to start always at the same position 12 minutes 30 seconds when user enters the site it automatically starts going down. If site is refreshed the clock is counting down from the start point which is 12 minutes 30 seconds.

<div id="timer">
                                <h1 class="pt-5 text-2xl mb-3 font-extralight text-gray-200">Round Closing In</h1>
                                <div class="text-3xl text-center flex w-full">
                                    <div class="text-xl mr-1 font-extralight text-gray-200">in</div>
                                    <div class="w-24 mx-1 p-2 text-lrgreen rounded-lg">
                                        <div class="text-md font-mono leading-none inline-block" id="hours">0</div>
                                        <div class="font-mono uppercase text-sm leading-none">Hours</div>
                                    </div>
                                    <div class="w-24 mx-1 p-2 text-lrgreen rounded-lg">
                                        <div class="font-mono leading-none inline-block" id="minutes">12</div>
                                        <div class="font-mono uppercase text-sm leading-none">Minutes</div>
                                    </div>
                                    <div class="text-xl mx-1 font-extralight text-gray-200">and</div>
                                    <div class="w-24 mx-1 p-2 text-lrgreen rounded-lg">
                                        <div class="font-mono leading-none inline-block" id="seconds">30</div>
                                        <div class="font-mono uppercase text-sm leading-none">Seconds</div>
                                    </div>
                                </div>
                            </div>
Tags:

2

Answers


  1. 0

    This won’t be possible with pure html.

    a simple solution is to use local storage which will persist this data on the browser utilising Javascript to display the timer on the page, saving the timer and getting it from local storage.

    A simple way to get this from the local storage would be this below line. Then you just need to implement the timer object, then create a function which saves the object as a string to the local storage using the window.onbeforeunloadhook, effectively saving the timer to the storage before the refresh happens. As well as a simple function to display the timer object properties to the page.

    var loadFunc = (elem) => {
  console.log("Timer saved is: "+ localStorage.getItem("timer"));
  let timer = localStorage.getItem("timer")
  if(timer){ //checks if value is saved or not
    /// parse to object and display to html
  }
}
    Login or Signup to reply.
  2. 0

    Here’s an example you can use, set the time variable appropriately, and adjust the timer interval if necessary.

    const startTime = Date.now();
const timerLength = 12.5 * 60; // # of seconds to start at = 12 mins 30 secs
const timerDiv = document.getElementById("timer");

const timerFn = () => {
  const currentTime = Date.now();
  let timeLeft = timerLength - Math.floor((currentTime - startTime) / 1000);
  if (timeLeft < 0) timeLeft = 0;
  
  let output = [
    Math.floor(timeLeft / 3600), // hours
    Math.floor(timeLeft % 3600 / 60), // minutes
    Math.floor(timeLeft % 3600 % 60) // seconds
  ]
    .map(n => n.toString().padStart(2, "0")) // leading zeroes
    .join(":");
  
  timerDiv.textContent = output;
  
  if (timeLeft === 0) {
    clearInterval(timer);
    console.log("Do something once the timer expires");
  }
};

timerFn(); // do this so the start time displays correctly
let timer = setInterval(timerFn, 1000); // the 1000 value can be adjusted, if you need better precision use a lower value
    <div id='timer'></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search