如何在同一页面显示不同时区的运行时间
How to display running time from different time zones on the same page
我能够显示和 运行 我所在时区的当前时间 PST - (US/Los Angeles) 我也能够显示 EST - (US/New York) .我的问题是,虽然我当前的时间显示秒 运行ning,但不同时区的时间仅显示页面加载时间并停止 运行ning。我在负责显示每个时区时间的两个函数中都使用了 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>
我想在一页上显示来自大约四个不同城市的 运行ning 时钟。任何帮助将不胜感激,谢谢。
我认为你不能像这样传入一个参数。最简单的选择可能是恢复参数,纽约音总是 post 3 小时。
或者尝试...
setInterval("newYorkTimeDisplay(+3)", 1000);
或者你可以试试匿名函数,像这样...
setInterval(function () {newYorkTimeDisplay(+3)}, 1000);
您需要将实际函数 newYorkTimeDisplay
传递给 setInterval
(而不是函数的 return 值),并确保传递其他参数,例如 +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>
我能够显示和 运行 我所在时区的当前时间 PST - (US/Los Angeles) 我也能够显示 EST - (US/New York) .我的问题是,虽然我当前的时间显示秒 运行ning,但不同时区的时间仅显示页面加载时间并停止 运行ning。我在负责显示每个时区时间的两个函数中都使用了 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>
我想在一页上显示来自大约四个不同城市的 运行ning 时钟。任何帮助将不胜感激,谢谢。
我认为你不能像这样传入一个参数。最简单的选择可能是恢复参数,纽约音总是 post 3 小时。
或者尝试...
setInterval("newYorkTimeDisplay(+3)", 1000);
或者你可以试试匿名函数,像这样...
setInterval(function () {newYorkTimeDisplay(+3)}, 1000);
您需要将实际函数 newYorkTimeDisplay
传递给 setInterval
(而不是函数的 return 值),并确保传递其他参数,例如 +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>