Tengo un código JS para un reloj analógico en tiempo real, funciona perfectamente bien. Pero quiero que el reloj se configure en una zona horaria específica (GMT o GMT+1), no en la hora del dispositivo del usuario. No estoy seguro si necesito usar JSON o algún tipo de API con el script.
Este es el código que estoy usando ahora
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>