I made a counter counting down from 25 with javscript, but when different users request the page, different time values ​​are displayed in the counter. Instead, I want to keep those 25 seconds in the database and count down with php or javascript so that every user sees the same value. How can I set up logic for the database?After 25 seconds it has to start again

var interval = 25000; 

      function reset() {
        localStorage.endTime =  new Date()   interval;
      }

      if (!localStorage.endTime) {
        reset();
      }
      function millisToMinutesAndSeconds(millis) {
        var seconds = ((millis % 60000) / 1000).toFixed(0);
        return (seconds < 10 ? "0" : "")   seconds;
       }
      setInterval(function () {
        var remaining = localStorage.endTime - new Date();
        if (remaining >= 0) {
          document.getElementById("timer").innerText =
            millisToMinutesAndSeconds(remaining);
        } else {
          tensecond();
        }
      }, 100);


var interval10 = 10000; 
    
          function reset() {
            localStorage.endTime =  new Date()   interval10;
          }
    
          if (!localStorage.endTime) {
            reset();
          }
          function millisToMinutesAndSeconds(millis) {
            var seconds = ((millis % 60000) / 1000).toFixed(0);
            return (seconds < 10 ? "0" : "")   seconds;
           }
          setInterval(function () {
            var remaining10 = localStorage.endTime - new Date();
            if (remaining10 > 0) {
              document.getElementById("timer").innerText =
                millisToMinutesAndSeconds(remaining10);
            } else {
              reset();
            }
          }, 100);

CodePudding user response：

I would probably instead store the end time of the timer (in UTC) in the database. Then, your clients can do something like:

const startTimer = async () => {
    const response = await fetch('https://your-server/timer');
    const endTime = await response.json(); // ex: { timestamp: 1663088872145 }
    const end = newDate(endTime.timestamp);
    const i = setInterval(() => { 
        const seconds = ((new Date()).valueOf() - end.valueOf()) / 1000
        if (i >= 0) {
            document.getElementById('timer').html = seconds;
        } else {
            clearInterval(i);
        }
    });
}

For example (with a mock backend):

const fetch = async () => {
    return new Promise((resolve) => {
        resolve({
            json: async function() {
                return { timestamp: (new Date()).valueOf()   15000 };
            }
        });
    });
}

const startTimer = async () => {
    const response = await fetch('https://your-server/timer');
    const endTime = await response.json(); // ex: { timestamp: 1663088872145 }
    const end = new Date(endTime.timestamp);
    let seconds = Math.round(-((new Date()).valueOf() - end.valueOf()) / 1000)
    document.getElementById('timer').innerHTML = seconds;
    const i = setInterval(() => { 
        seconds = Math.round(-((new Date()).valueOf() - end.valueOf()) / 1000)
        if (seconds >= 0) {
            document.getElementById('timer').innerHTML = seconds;
        } else {
            clearInterval(i);
        }
    }, 1000);
}

startTimer();

<div id="timer"/>

CodePudding user response：

Here is a solution without using php and a database which should ensure that multiple users loading the page at different times all see the same value for the count down.

setInterval(() => {
  const timerMs = 25000 - (Date.now() % 25000);
  document.querySelector('body').innerHTML = millisToSeconds(timerMs);
}, 100);

function millisToSeconds(millis) {
  const seconds = ((millis % 60000) / 1000).toFixed(0);
  return (seconds < 10 ? "0" : "")   seconds;
}