I have a JS code for a real-time analog clock, it's working perfectly fine. But I want the clock to be set on a specific timezone (GMT, or GMT+1), not the user device time. Not sure if I need to use JSON or some sort of API with the script.
This is the code I'm using right now
var sheet = (function() {
var style = document.createElement("style");
document.head.appendChild(style);
return style.sheet;
})();
var date = new Date();
var sDeg = date.getSeconds() / 60 * 360 + 90;
var mDeg = date.getMinutes() / 60 * 360 + 90 + sDeg / 60;
var hDeg = date.getHours() / 12 * 360 + 90 + mDeg / 12;
sDeg -= hDeg;
mDeg -= hDeg;
sheet.addRule('.analog-clock::after', 'transform: rotate(' + sDeg + 'deg)');
sheet.addRule('.analog-clock::before', 'transform: rotate(' + mDeg + 'deg)');
sheet.addRule('.analog-clock', 'transform: rotate(' + hDeg + 'deg)');
sheet.insertRule("@keyframes sSpin { 0 { transform: rotate(" + sDeg + "deg); } 100% { transform: rotate(" + (sDeg + 360) + "deg); } }", 0);
sheet.insertRule("@keyframes mSpin { 0 { transform: rotate(" + mDeg + "deg); } 100% { transform: rotate(" + (mDeg + 360) + "deg); } }", 0);
sheet.insertRule("@keyframes hSpin { 0 { transform: rotate(" + hDeg + "deg); } 100% { transform: rotate(" + (hDeg + 360) + "deg); } }", 0);
/* ANALOG CLOCK */
.analog-clock {
animation: hSpin 86400s infinite linear;
background-image: linear-gradient(to bottom, #666666, #666666 2px, transparent 0px);
background-position: 33.5px 75px, 0 0;
background-repeat: no-repeat;
background-size: 45px 100%, 100% 100%;
border-radius: 50%;
border: #666666 2px solid;
height: 160px;
position: relative;
width: 160px;
}
.analog-clock:before,
.analog-clock:after {
background-repeat: no-repeat;
background-size: 70px 5px;
display: block;
height: 1px;
left: calc(50% - 65px);
margin-top: -2.5px;
position: absolute;
top: 50%;
transform-origin: 100%;
width: 65px;
content: '';
}
/* second hand */
.analog-clock:after {
/* adjust timing to account for the background moving */
animation: sSpin 59.99s infinite linear;
background-image: linear-gradient(red, red);
}
/* minute hand */
.analog-clock:before {
/* adjust timing to account for the background moving */
animation: mSpin 3599.95s infinite linear;
background-image: linear-gradient(#666666, #666666);
}
<span class="footer-clock"><div class="analog-clock"></div></span>