I want to get New York time in this JavaScript clock?-CodePudding

I want to get the New York time in this JavaScript. I tried with toLocaleTimeString('en-US', { timeZone: 'America/New_York' })

But it doesn't work.

Javascript:

setInterval(setClock, 1000)

const hourHandTK = document.querySelector('[data-hour-hand-tk]')
const minuteHandTK = document.querySelector('[data-minute-hand-tk]')
const secondHandTK = document.querySelector('[data-second-hand-tk]')

function setClock() {

var currentDate = new Date()
  const secondsRatio = currentDate.getSeconds() / 60
  const minutesRatio = (secondsRatio   currentDate.getMinutes()) / 60
  const hoursRatio = (minutesRatio   currentDate.getHours()) / 12
  setRotation(secondHandTK, secondsRatio)
  setRotation(minuteHandTK, minutesRatio)
  setRotation(hourHandTK, hoursRatio)
}

function setRotation(element, rotationRatio) {
  element.style.setProperty('--rotation', rotationRatio * 360)
}

setClock()

Full code:

Show code snippet

setInterval(setClock, 1000)

const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-minute-hand]')
const secondHand = document.querySelector('[data-second-hand]')

function setClock() {
  const currentDate = new Date()
  const secondsRatio = currentDate.getSeconds() / 60
  const minutesRatio = (secondsRatio   currentDate.getMinutes()) / 60
  const hoursRatio = (minutesRatio   currentDate.getHours()) / 12
  setRotation(secondHand, secondsRatio)
  setRotation(minuteHand, minutesRatio)
  setRotation(hourHand, hoursRatio)
}

function setRotation(element, rotationRatio) {
  element.style.setProperty('--rotation', rotationRatio * 360)
}

setClock()

*, *::after, *::before {
  box-sizing: border-box;
}

body {
  background: linear-gradient(to right, hsl(200, 100%, 50%), hsl(175, 100%, 50%));
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.clock {
  width: 300px;
  height: 300px;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 50%;
  border: 2px solid black;
  position: relative;
}

.clock .number {
  --rotation: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotate(var(--rotation));
  font-size: 1.5rem;
}

.clock .number1 { --rotation: 30deg; }
.clock .number2 { --rotation: 60deg; }
.clock .number3 { --rotation: 90deg; }
.clock .number4 { --rotation: 120deg; }
.clock .number5 { --rotation: 150deg; }
.clock .number6 { --rotation: 180deg; }
.clock .number7 { --rotation: 210deg; }
.clock .number8 { --rotation: 240deg; }
.clock .number9 { --rotation: 270deg; }
.clock .number10 { --rotation: 300deg; }
.clock .number11 { --rotation: 330deg; }

.clock .hand {
  --rotation: 0;
  position: absolute;
  bottom: 50%;
  left: 50%;
  border: 1px solid white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform-origin: bottom;
  z-index: 10;
  transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}

.clock::after {
  content: '';
  position: absolute;
  background-color: black;
  z-index: 11;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.clock .hand.second {
  width: 3px;
  height: 45%;
  background-color: red;
}

.clock .hand.minute {
  width: 7px;
  height: 40%;
  background-color: black;
}

.clock .hand.hour {
  width: 10px;
  height: 35%;
  background-color: black;
}














/* Background Styles Only */

@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
    font-family: Raleway;
}

.side-links {
  position: absolute;
  top: 15px;
  right: 15px;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
  width: 180px;
  padding: 10px 0;
  border-radius: 10px;
}

.side-link-youtube {
  background-color: red;
}

.side-link-twitter {
  background-color: #1DA1F2;
}

.side-link-github {
  background-color: #6e5494;
}

.side-link-text {
  margin-left: 10px;
  font-size: 18px;
}

.side-link-icon {
  color: white;
  font-size: 30px;
}

<div class="clock">
  <div class="hand hour" data-hour-hand></div>
  <div class="hand minute" data-minute-hand></div>
  <div class="hand second" data-second-hand></div>
  <div class="number number1">1</div>
  <div class="number number2">2</div>
  <div class="number number3">3</div>
  <div class="number number4">4</div>
  <div class="number number5">5</div>
  <div class="number number6">6</div>
  <div class="number number7">7</div>
  <div class="number number8">8</div>
  <div class="number number9">9</div>
  <div class="number number10">10</div>
  <div class="number number11">11</div>
  <div class="number number12">12</div>
</div>

<!-- Side Links Only -->
<div class="side-links">
  <a href="https://youtu.be/Ki0XXrlKlHY" target="_blank" class="side-link side-link-youtube">
    <i class="fab fa-youtube-square side-link-icon"></i>
    <span class="side-link-text">View Tutorial</span>
  </a>
  <a href="https://github.com/WebDevSimplified" target="_blank" class="side-link side-link-github side-link-icon">
    <i class="fab fa-github-square"></i>
    <span class="side-link-text">View GitHub</span>
  </a>
  <a href="https://twitter.com/DevSimplified" target="_blank" class="side-link side-link-twitter">
    <i class="fab fa-twitter-square side-link-icon"></i>
    <span class="side-link-text">View Twitter</span>
  </a>
</div>

Thanks in advance.

CodePudding user response：

toLocaleTimeString converts your Date to a String.

This should work

const currentDate = new Date(new Date().toLocaleString("en-US", {timeZone: "America/New_York"}));

CodePudding user response：

Sure toLocaleTimeString('en-US', { timeZone: 'America/New_York' }) wont work, cuz it returns the time part of the date as a string (e.g: 9:19:06 AM)

In your case, I guess this would be the solution:

var currentDate = new Date(
    (new Date()).toLocaleString(
        'en-US',
        { timeZone: 'America/New_York' }
    )
)

CodePudding user response：

This is kind of your choice if you want to or not but if you want, try using nodejs, after you install it you can just install https://www.npmjs.com/package/moment and then the only code you need is

var moment = require("moment-timezone")

var june = moment(new Date());
june.tz('America/New_York').format('ha z');

if you would like I can also help you through the installing process.