自动对时javascript时钟

前几天,突发奇想,想在左边的widget里面加一个世界时钟,显示不同时区的时间。说干就干,大致思路如下,首先取得标准时间的unix时间戳,然后把标准时间戳传递给js脚本,js计算本机时间戳与标准时间戳的差值,然后再补上差值进行显示。乍一看上还挺简单,但是一旦考虑细节就很麻烦了。

1、时区问题,js里面getDate(),getDay()…等等一系列时间函数都是本机时区的时间,而我需要的是不随时区改变的结果。因此只能以UTC时间为准,直接在时间戳上加上时区的差值,举个例子,北京时间=UTC(Timetamp)+3600*8s,得到一个假的UTC时间(实际上是某一个时区的时间),再用getUTCDate(),getUTCDay()…取得当地时间,输出给js显示。

2、夏令时问题,在美国有着美国特色的夏令时,在某一特殊日子(2019年是11月3日凌晨2点),时钟回拨一小时,此时,纽约的UTC-4就会变成UTC-5了,因此需要判断是否夏令时,而我在javascript里找了一圈,都没有合适判断夏令时的函数,而PHP里有一个函数date(‘I’,$unix_timestamp),在设置完默认时区后,判断该时区是否是夏令时,返回1是夏令时,返回0时是冬令时。因此这里时区换算用PHP来做,js只用来计算时间差,并显示时间。

3、下面就是行动了,我找到了一个可以获取标准时间的php代码(链接),又找到了感觉自己能驾驭的,简单的canvas钟表的代码(链接),然后就把他们组装到一起,就可以啦。

4、大概搞好后,在HiDPI的设备会出现显示模糊的问题,我起初以为是canvas的原因,甚至打算换成svg,折腾到最后,才发现有现成的解决方案(链接),站在前人的肩膀上,终于调好了代码。

做好的成果如下(本机运行下,因为无法运行ntptime.php,所以显示本机的utc时间),我也懒得解释代码了^_^。

分享到:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注