How To Auto-Refresh the Time and Date Every Second (Live Time & Date)-CodePudding

I have written a javascript code to fetch users' Dates and times and show it on the website but the problem is it's not auto-refreshing the data, every time you have to refresh the page to get the new update. I want to implement a system that auto updates the Date, Month, Year, Day & Time (All) automatically even when the user stays on the page for a long time.

My Format [04 March 2022, Friday - 03:18:33 PM]

I would be very grateful for the help.

var myDate = new Date();

let daysList = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let monthsList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Aug', 'Oct', 'Nov', 'Dec'];


let date = myDate.getDate();
let month = monthsList[myDate.getMonth()];
let year = myDate.getFullYear();
let day = daysList[myDate.getDay()];

let today = `${date} ${month} ${year}, ${day}`;

let amOrPm;
let twelveHours = function (){
    if(myDate.getHours() > 12)
    {
        amOrPm = 'PM';
        let twentyFourHourTime = myDate.getHours();
        let conversion = twentyFourHourTime - 12;
        return `${conversion}`

    }else {
        amOrPm = 'AM';
        return `${myDate.getHours()}`}
};
let hours = twelveHours();
let minutes = myDate.getMinutes();
let seconds = myDate.getSeconds();

let currentTime = `${hours}:${minutes}:${seconds} ${amOrPm}`; 

document.write(today   ' '   currentTime);

CodePudding user response：

you can :

wrap your code inside a function
create a div that will receive the current time
call the function each 1 seconds with setInterval
update div innerText with current Time

function setCurrentTime() {
  var myDate = new Date();

  let daysList = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  let monthsList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Aug', 'Oct', 'Nov', 'Dec'];


  let date = myDate.getDate();
  let month = monthsList[myDate.getMonth()];
  let year = myDate.getFullYear();
  let day = daysList[myDate.getDay()];

  let today = `${date} ${month} ${year}, ${day}`;

  let amOrPm;
  let twelveHours = function() {
    if (myDate.getHours() > 12) {
      amOrPm = 'PM';
      let twentyFourHourTime = myDate.getHours();
      let conversion = twentyFourHourTime - 12;
      return `${conversion}`

    } else {
      amOrPm = 'AM';
      return `${myDate.getHours()}`
    }
  };
  let hours = twelveHours();
  let minutes = myDate.getMinutes();
  let seconds = myDate.getSeconds();

  let currentTime = `${hours}:${minutes}:${seconds} ${amOrPm}`;
  
  document.getElementById('current-time').innerText = today   ' '   currentTime
}

setInterval(function() {
  setCurrentTime();
}, 1000);

<div id="current-time"></div>

CodePudding user response：

The quick and dirty way would be to use the setInterval() function. It takes in a callback and a time interval, or how often, you would like it to repeat (in milliseconds):

setInterval(() {
  console.log('hello world!')
}, 1000) // Run every second; 1 second == 1000 milliseconds

CodePudding user response：

you can use setTimeOut and setinterval. var myDate = new Date();

let daysList = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
];
let monthsList = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Aug",
    "Oct",
    "Nov",
    "Dec",
];

function timer() {
    let date = myDate.getDate();
    let month = monthsList[myDate.getMonth()];
    let year = myDate.getFullYear();
    let day = daysList[myDate.getDay()];

    let today = `${date} ${month} ${year}, ${day}`;

    let amOrPm;
    let twelveHours = function() {
        if (myDate.getHours() > 12) {
            amOrPm = "PM";
            let twentyFourHourTime = myDate.getHours();
            let conversion = twentyFourHourTime - 12;
            return `${conversion}`;
        } else {
            amOrPm = "AM";
            return `${myDate.getHours()}`;
        }
    };
    let hours = twelveHours();
    let minutes = myDate.getMinutes();
    let seconds = myDate.getSeconds();

    let currentTime = `${hours}:${minutes}:${seconds} ${amOrPm}`;

    document.write(today   " "   currentTime);
    setTimeout(timer, 1000)
}
timer()