Question

我制作了非常基本的JavaScript世界时钟。我做了它的工作，但是不同城市的时间有点小问题没有按照我想要的更新。例如悉尼到英国的时差为11小时，所以我加了11 +小时。然后我添加了一个条件，将时间格式化为12小时格式，如下所示 sydneyHours＆gt; 12 sydneyHours - = 12;

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

此外，任何改进建议都将受到赞赏。

非常感谢

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

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

当本地时间在PM时，您为时差添加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/

原因：你会在试图找出每个国家的时区时遇到痛苦。

如果该网址不再有效（我不指望）尝试使用github回购：https://github.com/moment/moment-timezone/

您的代码的另一大问题：

永远不要使用getHours()等来执行此任务。它们将返回运行浏览器的计算机的本地时间。请改用getUTCHours()等 srsly。试试看时刻吧。在实施时区的过程中，你会明显地避免很多痛苦。

时区定义往往会因政治等而不时发生变化，这甚至会改变直接节省时间

Javascript中的世界时钟无法正常使用小时

2 个答案: