Display 2 analog clock in Asp.net Core with a different time zone using moment.js and moment-timezon-CodePudding

`I want to show a two different analog clock in my home page with different timezone. I already download the moment.js as well as the moment-timezone-with-data.js and place it in my js folder. I've used codes from internet but it's now showing the exact time.

Here my index.cshtml

<div id="clockContainer">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<h3 >London</h3>

the css:

#clockContainer {
position: relative;
margin: auto;
height: 100px;
width: 100px;
background: url(clock.png) no-repeat;
background-size: 100%;
}

 #hour,
#minute,
#second {
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
}

#hour {
width: 1.8%;
height: 25%;
top: 25%;
left: 48.85%;
opacity: 0.8;
 }

#minute {
width: 1.6%;
height: 32%;
top: 19%;
left: 48.9%;
opacity: 0.8;
}

#second {
width: 1%;
height: 40%;
top: 9%;
left: 49.25%;
opacity: 0.8;
}
.location {
display: grid;
place-items: center;
gap: 3rem;
}

and the js:

$(function () {
function updateClock() {
    var now = moment.tz("Europe/London"),
        second = now.seconds() * 6,
        minute = now.minutes() * 6,
        hour = ((now.hours() % 12) / 12) * 360   90   minute / 12;

    $('#hour').css("transform", "rotate("   hour   "deg)");
    $('#minute').css("transform", "rotate("   minute   "deg)");
    $('#second').css("transform", "rotate("   second   "deg)");
}
setInterval(updateClock, 1000);
});

CodePudding user response：

I don't use any JS library, Here is a simple demo about how to Display 2 analog clock(One is the current time, The other is Uk Time), I hope it can help you solve this issue.

Css

html {
    text-align: center;
    font-size: 10px;
}

body {
    margin: 0;
    font-size: 2rem;
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
}

.clock {
    background: #2d5171;
    width: 20rem;
    height: 20rem;
    position: relative;
    padding: 2rem;
    border: 7px solid #16344f;
    box-shadow: -4px -4px 10px rgba(67,67,67,0.5), inset 4px 4px 10px rgba(0,0,0,0.5), inset -4px -4px 10px rgba(67,67,67,0.5), 4px 4px 10px rgba(0,0,0,0.3);
    border-radius: 50%;
    margin: 50px auto;
}

.outer-clock-face {
    position: relative;
    background: #2d5171;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

    .outer-clock-face::after {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .outer-clock-face::after,
    .outer-clock-face::before,
    .outer-clock-face .marking {
        content: '';
        position: absolute;
        width: 5px;
        height: 100%;
        background: #c8444a;
        z-index: 0;
        left: 49%;
    }

    .outer-clock-face .marking {
        background: #6391bb;
        width: 3px;
    }

        .outer-clock-face .marking.marking-one {
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            transform: rotate(30deg)
        }

        .outer-clock-face .marking.marking-two {
            -webkit-transform: rotate(60deg);
            -moz-transform: rotate(60deg);
            transform: rotate(60deg)
        }

        .outer-clock-face .marking.marking-three {
            -webkit-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            transform: rotate(120deg)
        }

        .outer-clock-face .marking.marking-four {
            -webkit-transform: rotate(150deg);
            -moz-transform: rotate(150deg);
            transform: rotate(150deg)
        }

.inner-clock-face {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: #2d5171;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    z-index: 1;
}

    .inner-clock-face::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 16px;
        border-radius: 18px;
        margin-left: -9px;
        margin-top: -6px;
        background: #4d4b63;
        z-index: 11;
        border: 2px solid #d9701b;
    }

.hand {
    width: 50%;
    right: 50%;
    height: 6px;
    background: #e8d752;
    position: absolute;
    top: 50%;
    border-radius: 6px;
    transform-origin: 100%;
    transform: rotate(90deg);
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

    .hand.hour-hand {
        width: 30%;
        z-index: 3;
    }

    .hand.min-hand {
        height: 3px;
        z-index: 10;
        width: 40%;
    }

    .hand.second-hand {
        background: #ee791a;
        width: 45%;
        height: 2px;
    }

HTML and Javascript:

<h1>Current Time</h1>
<div >
    <div >
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div >
            <div id="A1" ></div>
            <div id="A2" ></div>
            <div id="A3" ></div>
        </div>  
    </div>
</div>


<h1>Uk Time</h1>
<div >
    <div >
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div >
            <div id="B1" ></div>
            <div id="B2" ></div>
            <div id="B3" ></div>
        </div>  
    </div>
</div>

<script>
      
    const secondHand = document.getElementById('A3');
    const minsHand = document.getElementById('A2');
    const hourHand = document.getElementById('A1');

     const secondHand2 = document.getElementById('B3');
    const minsHand2 = document.getElementById('B2');
    const hourHand2 = document.getElementById('B1');

     function setDate() {

      //Get the current time
      const now = new Date();     

      const seconds = now.getSeconds();
      const secondsDegrees = ((seconds / 60) * 360)   90;
      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

      secondHand2.style.transform = `rotate(${secondsDegrees}deg)`;

      const mins = now.getMinutes();
      const minsDegrees = ((mins / 60) * 360)   ((seconds/60)*6)   90;
      minsHand.style.transform = `rotate(${minsDegrees}deg)`;

      minsHand2.style.transform = `rotate(${minsDegrees}deg)`;


      const hour = now.getHours();
        //the time in the UK is eight hours behind my time zone
      const Ukhour = hour-8;
      const hourDegrees = ((hour / 12) * 360)   ((mins/60)*30)   90;
      const UKhourDegrees = ((Ukhour / 12) * 360)   ((mins / 60) * 30)   90;
      hourHand.style.transform = `rotate(${hourDegrees}deg)`;

        hourHand2.style.transform = `rotate(${UKhourDegrees}deg)`;
    }

    setInterval(setDate, 1000);

    setDate();
</script>

Demo:

You can see it works well now.