Javascript中的世界时钟没有正确获取时间

Question

我制作了非常基础的 JavaScript 世界时钟。我让它工作了，但是不同城市的时间没有按我想要的更新。例如，悉尼与英国的时差是 11 小时，所以我添加了 11 小时以上。然后我添加了一个条件来将时间格式化为 12 小时格式，如下所示 悉尼时间 > 12 sydneyHours -= 12;

但它仍然显示 11 + 本地时间的任何小时数，例如（16:46:49）；

此外，我们将不胜感激任何改进建议。

非常感谢

function timeNow(){
	var currentTime = new Date();
	var hours = currentTime.getHours();
	var minutes = currentTime.getMinutes();
	var seconds = currentTime.getSeconds();
	var meridiem = "AM";
	var isbHours = 5 + hours;
	var romeHours = 1 + hours;
	var sydneyHours = 11 + hours;

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

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

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

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

	if(hours > 12){
		hours = hours - 12;
		meridiem = "PM";
	}

	if(isbHours > 12){
		isbHours = isbHours - 12;
		meridiem = "PM";
	}

	if(romeHours > 12){
		romeHours = romeHours - 12;
		meridiem = "PM";
	}

	if(sydneyHours > 12){
		sydneyHours = sydneyHours - 12;
		meridiem = "PM";
	}
	




	var localClock = document.getElementById('localClock');

	localClock.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem;
	localClock.innerText += "\n" + "Local Time";

	var isbClock = document.getElementById('isbClock');
	isbClock.innerText = isbHours + ":" + minutes + ":" + seconds + " " + meridiem;
	isbClock.innerText += "\n" + "Islamabad Time";

	var sydneyClock = document.getElementById('sydneyClock');
	sydneyClock.innerText = sydneyHours + ":" + minutes + ":" + seconds + " " + meridiem;
	sydneyClock.innerText += "\n" + "Sydney Time";



	var romeClock = document.getElementById('romeClock');
	romeClock.innerText = romeHours + ":" + minutes + ":" + seconds + " " + meridiem;
	romeClock.innerText += "\n" + "Rome Time";
}

setInterval(timeNow, 1000);

#localClock {
	background: #87D4ED;
}
#isbClock {
	background: #EDDB11;
}

#sydneyClock {
	background: #F27D66;
}

#romeClock {
	background: #F09E2B;
}

#worldclock {
	width: 800px;
	margin: 50px auto;

}
#localClock, #isbClock, #sydneyClock, #romeClock {
	font-size: 40px;
	font-family: arial, monospace;
    position: relative;
    top: 0; left: 0; right: 0; bottom: 0;
    color: #fff;
    padding-top: 70px;
    text-align: center;
    width: 400px;
    height: 200px;
    float: left;
}

<div id="worldclock">

	<div id="localClock"></div>
	<div id="isbClock"></div>
	<div id="sydneyClock"></div>
	<div id="romeClock"></div>
	
 </div>

Answer 1

与悉尼时间有关的最初问题是因为您没有考虑到您的小时变量超过 24 的事实。

当当地时间在下午时，您将时差加上 11 小时，然后减去 12 以尝试转换为 12 小时制。

这是发生了什么

16 //local hours
+ 11 = 27 // time zone adjustment
-12 = 15 // attempt to convert to 12 hour clock

弥补这一点的最简单方法是使用modulus operator。

var sydneyHours = (11 + hours) % 24;

然而，这确实带来了一个新问题，因为悉尼现在将在实际上是 AM 时显示 03:43:23 PM，因为您为所有时区使用了一个单一的 meridiem 变量，如果其中一个是 PM，它们都被设置为 PM . learn the concept of objects 对您来说可能是一个很好的情况。您可以为每个城市创建一个新对象，并为其分配自己的 hour 和 meridiem 属性值，然后分别读取它们。

Answer 2

您可能想尝试一下 Moment Timezone：http://momentjs.com/timezone/

原因：你会在尝试找出每个国家/地区的时区时感到痛苦。

如果该 url 不再起作用（我没想到），请尝试他们的 github repo：https://github.com/moment/moment-timezone/

您的代码的另一个大问题：

永远不要使用getHours() 等来完成这项任务。他们将返回运行浏览器的计算机的本地时间。请改用getUTCHours() 等。
srsly。试一试momentjs。在实施时区的过程中，您会从字面上避免很多痛苦。

由于政治等原因，时区定义往往会不时改变。这甚至会改变日常节约时间