如何在同一页面上显示不同时区的运行时间答案

【问题标题】：How to display running time from different time zones on the same page如何在同一页面上显示不同时区的运行时间
【发布时间】：2023-04-01 18:34:01
【问题描述】：

我可以在我的时区 PST -（美国/洛杉矶）显示和运行当前时间，我还可以显示 EST -（美国/纽约）。我的问题是，虽然我当前的时间显示了在不同时区运行时间的秒数，但只显示了页面加载的时间并停止运行。我在负责显示每个时区时间的两个函数中都使用了 setInterval() 函数。这是我的代码：

$(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>

我想在一页上显示来自大约四个不同城市的运行时钟。任何帮助将不胜感激，谢谢。

【问题讨论】：

标签： javascript jquery timezone setinterval clock

【解决方案1】：

您需要将您的实际函数newYorkTimeDisplay 传递给setInterval（而不是函数的返回值），并确保像+3 这样的附加参数传递给它，如下所示：

setInterval(newYorkTimeDisplay, 1000, +3);

演示片段：

$(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>

【讨论】：

如何减少分钟数

【解决方案2】：

我不认为你可以传入类似的参数。最简单的选择可能是恢复参数，纽约音总是在 3 小时后发布。

或者尝试...

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

或者你可以试试匿名函数，像这样......

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

【讨论】：