How to display running time from different time zones on the same page

Question

I am able to display and run the current time in my time zone PST - (US/Los Angeles) and I am also able to display EST - (US/New York). My problem is that while my current time shows the seconds running the time in the different time zone only shows the time of page load and stops running. I am using the setInterval() function in both my functions responsible for displaying the time for each time zone. Here is my code:

$(document).ready(function(){
   
  //function to display time in current time zone (PST) 
  function timeDisplay() {
    var currentTime = new Date();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    var meridiem = " ";
   
    if(hours >= 12){
      hours = hours - 12;
      meridiem = "pm";
    }
    else{
      meridiem = "am";
    }
    if(hours === 0){
      hours = 12;
    }
    if(hours < 10){
        hours = "0" + hours;
      }
    if(minutes < 10){
      minutes = "0" + minutes;
    }
    if(seconds < 10){
      seconds = "0" + seconds;
    }
    
    var clockDiv = document.getElementById('clock');
    clockDiv.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem;
  }
  
  timeDisplay();
  setInterval(timeDisplay, 1000);
  

  
  //function to display time in (EST) New York 
  function newYorkTimeDisplay(offset) {
    var currentTime = new Date();  
    currentTime.setHours(currentTime.getHours()+offset); 
        
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    var meridiem = " ";
   
    if(hours >= 12){
      hours = hours - 12;
      meridiem = "pm";
    }
    else{
      meridiem = "am";
    }
    if(hours === 0){
      hours = 12;
    }
    if(hours < 10){
        hours = "0" + hours;
      }
    if(minutes < 10){
      minutes = "0" + minutes;
    }
    if(seconds < 10){
      seconds = "0" + seconds;
    }
    
    var newYorkDiv = document.getElementById('newYork');      
    newYorkDiv.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem; 
  }
     
  newYorkTimeDisplay(+3);
  setInterval(newYorkTimeDisplay(+3), 1000); 
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div>
    <div id='clock'></div>
    <div id="newYork"></div>
  </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I would like to display a running clock from about four different cities on one page. Any help would be appreciated, thanks.

score 0 · Answer 1 · answered Mar 25 '17 at 02:33

I don't think you can pass in a parameter like. The simplest option might be to revive the parameter, of New York tone is always post by 3 hours.

Alternatively try...

setInterval("newYorkTimeDisplay(+3)", 1000);

Or you could try an anonymous function, like this...

setInterval(function () {newYorkTimeDisplay(+3)}, 1000);

score 0 · Accepted Answer · answered Mar 25 '17 at 02:36

You need to pass your actual function newYorkTimeDisplay to setInterval (instead of the function's return value), and make sure that additional arguments like +3 are passed to it like so:

setInterval(newYorkTimeDisplay, 1000, +3);

Demo Snippet:

$(document).ready(function(){
   
  //function to display time in current time zone (PST) 
  function timeDisplay() {
    var currentTime = new Date();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    var meridiem = " ";
   
    if(hours >= 12){
      hours = hours - 12;
      meridiem = "pm";
    }
    else{
      meridiem = "am";
    }
    if(hours === 0){
      hours = 12;
    }
    if(hours < 10){
        hours = "0" + hours;
      }
    if(minutes < 10){
      minutes = "0" + minutes;
    }
    if(seconds < 10){
      seconds = "0" + seconds;
    }
    
    var clockDiv = document.getElementById('clock');
    clockDiv.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem;
  }
  
  timeDisplay();
  setInterval(timeDisplay, 1000);
  

  
  //function to display time in (EST) New York 
  function newYorkTimeDisplay(offset) {
    var currentTime = new Date();  
    currentTime.setHours(currentTime.getHours()+offset); 
        
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    var meridiem = " ";
   
    if(hours >= 12){
      hours = hours - 12;
      meridiem = "pm";
    }
    else{
      meridiem = "am";
    }
    if(hours === 0){
      hours = 12;
    }
    if(hours < 10){
        hours = "0" + hours;
      }
    if(minutes < 10){
      minutes = "0" + minutes;
    }
    if(seconds < 10){
      seconds = "0" + seconds;
    }
    
    var newYorkDiv = document.getElementById('newYork');      
    newYorkDiv.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem; 
  }
     
  newYorkTimeDisplay(+3);
  setInterval(newYorkTimeDisplay, 1000, +3); 
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div>
    <div id='clock'></div>
    <div id="newYork"></div>
  </div>
</body>

How to display running time from different time zones on the same page

2 Answers2

Demo Snippet: