Question

I am trying to create two clocks on a website that says two times on it. One from London and the other from New York.

I have been able to create a clock that reads the current time on my computer but i’m not sure how to place a time zone into this.

The code I have so far is:

<script type="text/javascript" language="javascript">

function renderTime() {
    var currentTime = new Date();
    var diem = "AM";
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();

    if (h == 0) {
        h = 12
    } else if (h > 12) {
        h = h - 12;
        diem = "PM";
    }

    if (h < 10) {
        h = "0" + h;
    }

    if (m < 10) {
        m = "0" + m;
    }

    if (s < 10) {
        s = "0" + s;
    }

    var myClock = document.getElementById ("clockDisplay");
    myClock.textContent = h + ":" + m + ":" + s + " " + diem;

    setTimeout ('renderTime()', 1000);
}
renderTime();
</script>

This is being applied to a CSS style I have created so I can have the clock in a specific typeface.

Answer 1

You can add or subtract hours from your date with

currentTime.setHours(currentTime.getHours()+offset);

where offset is any number of hours.

I updated the jsfiddle with that line and the function so that it accepts a parameter for the offset. This is not the UTC offset, just how many hours to add from the system time. You can get the current UTC offset by currentTime.getTimezoneOffset()/60

Demo