Question

0

184

Vistas

Setting timezone for an analog clock in JavaScript

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>

about 4 years ago · Juan Pablo Isaza

Responde la pregunta

0

184

Setting timezone for an analog clock in JavaScript

Encuentra empleos remotos

Andres GPT