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

我可以在我的时区 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>

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

你需要

将实际函数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>

我认为你不能传入这样的参数。最简单的选择可能是恢复参数，纽约语气总是在 3 小时内发布。

或者尝试...

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

或者你可以尝试一个匿名函数，比如这样...

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

演示片段：

相关内容

最新更新

热门标签：