JavaScript: Making an If statement adjust to a variable after adding to it-CodePudding

I am creating a HTML/JavaScript page that displays world clocks, However I ran into a problem with the clocks not adjusting to the AM/PM correctly, and also not staying in the standard time format. I realize this is because the if statement that makes the session change to = 'PM' only works for the time zone it gets. Also my code only gets the time and puts it in the California slot because that is the time zone I am in, so if you open this code in a time zone other than pacific time, all of the world clocks will be incorrect. Is it possible to keep my clocks in a standard time format and also be the correct AM or PM?

<body>
    <div id="container">
        <div id="clockContainer">
            <div id="titleContainer">
                <p id="title">California</p>
                <p id="clock" class='clock'></p>
            </div>
            <div id="titleContainer">
                <p id="title">New York</p>
                <p id="york" class='clock'></p>
            </div>
            <div id="titleContainer">
                <p id="title">Hawaii</p>
                <p id="hawaii" class='clock'></p>
            </div>
        </div>
        <div id="clockContainer">
            <div id="titleContainer">
                <p id="title">Dubai</p>
                <p id="dubai" class='clock'></p>
            </div>
            <div id="titleContainer">
                <p id="title">Seconds</p>
                <p id="seconds" class='clock'></p>
            </div>
            <div id="titleContainer">
                <p id="title">London</p>
                <p id="london" class='clock'></p>
            </div>
        </div>
        <div id="clockContainer">
            <div id="titleContainer">
                <p id="title">Tokyo</p>
                <p id="tokyo" class='clock'></p>
            </div>
            <div id="titleContainer">
                <p id="title">Paris</p>
                <p id="paris" class='clock'></p>
            </div>
            <div id="titleContainer">
                <p id="title">Moscow</p>
                <p id="moscow" class='clock'></p>
            </div>
        </div>
    </div>
  </body>
</html>

<script>

let clock = document.getElementById('clock');

function currentTime() {

    let date = new Date();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    let session = 'AM';

    if(hours == 0){
        hours = 12
    }
    if (hours > 12){
        hours = hours - 12
        session = 'PM'
    }

    minutes = (minutes < 10) ? "0"   minutes : minutes;
    seconds = (seconds < 10) ? "0"   seconds : seconds;
    
    let time = hours   ':'   minutes   ' '   session;
    document.getElementById('clock').innerText = time;
    
    let york = (hours   3)   ':'   minutes   ' '   session;
    document.getElementById('york').innerText = york;

    let hawaii = (hours - 2)   ':'   minutes   ' '   session;
    document.getElementById('hawaii').innerText = hawaii;

    let dubai = (hours   12)   ':'   minutes   ' '   session;
    document.getElementById('dubai').innerText = dubai;

    document.getElementById('seconds').innerText = ':'   seconds;

    let london = (hours   8)   ':'   minutes   ' '   session;
    document.getElementById('london').innerText = london;

    let moscow = (hours   12)   ':'   minutes   ' '   session;
    document.getElementById('moscow').innerText = moscow;

    let paris = (hours   9)   ':'   minutes   ' '   session;
    document.getElementById('paris').innerText = paris;

    let tokyo = (hours   17)   ':'   minutes   ' '   session;
    document.getElementById('tokyo').innerText = tokyo;

    let t = setTimeout(function(){  currentTime() }, 1000);
}

currentTime();

</script>

CodePudding user response：

Try the moment js library.

It will help you with date,time management, form, calculations, and more.

good luck.

moment().format('MMMM Do YYYY, h:mm:ss a'); // December 17th 2021, 2:54:05 pm
moment().format('dddd');                    // Friday
moment().format("MMM Do YY");               // Dec 17th 21
moment().format('YYYY [escaped] YYYY');     // 2021 escaped 2021
moment().format();                          // 2021-12-17T14:54:05 09:00

https://momentjs.com/

CodePudding user response：

You can also try using the getUTCHours() function on the date object to standardize the time that you're getting and work from there.