使用JavaScript进行简单的日期和时间本地化

我们在SitePoint竞赛和市场工作中遇到的众多挑战之一，就是确定向用户展示日期和时间的最佳方法。

这听起来很简单，但是我们需要牢记许多注意事项。

易于人类阅读

比“ 2007年6月4日星期一，上午10:04 am +1000”和“ Ends Wed，2007年6月6日，上午9:28 am +1000”更容易理解“ 2小时前开始”和“两天结束”。

可被搜索引擎访问

查看两天前由搜索引擎缓存的网页的摘要或完整副本时，“ 2小时前开始”或“ 2天后结束”是没有意义的。 同样，对于在完全不同的时区的人来说，“ 2007年6月4日星期一，上午10:04 +1000”很难理解。

追求绩效

我们希望能够将缓存生存期分配给页面的尽可能多的部分。 文本“ 2007年6月4日星期一开始，上午10:04 +1000”不需要缓存过期，而“不到一分钟前开始”则只能可靠缓存1秒。

当地时间

尽管大多数人都可以弄清楚“格林尼治标准时间2007年6月4日星期一，上午10:04”在当地时区的含义，但是如果我们能为他们做总和，那将是最有价值的，因此他们不需要花费30 1秒钟前就知道拍卖结束了几秒钟。

旧页面

由于生活还不够复杂，因此发明了选项卡式浏览，以便我们可以立即将更多的信息输入脑海。 通过选项卡，还可以轻松跟踪数小时，然后再返回该SitePoint Marketplace列表。 但是，目前还无法得知标有“在28分钟内结束”的拍卖实际上已经消失了。

微型解决方案

为了一口气解决所有这些问题，我们创建了一个非常简单的内部微格式和一些聪明的JavaScript。 它们一起使我们能够以一种有用，有意义并且对所有用户都可用的方式显示日期和时间。

我们从一些基本的HTML标记开始：


<span class="sitepoint-datetime">Mon, 28 May 2007 01:30:49 GMT</span>


没有JavaScript的用户和一些辅助技术的用户会看到这种情况。 它可能不像“ 7天前”那么漂亮，但是当我们不知道如何，何时何地实际查看页面时，它是最正确，最有意义和最容易掌握的格式。 我们在类名前面加上了“ sitepoint-”，以明确表明这不是标准的微格式。

我们对日期/时间使用了RFC 2822格式，这很容易被人阅读，也可以直接传递给JavaScript Date对象的构造函数 。

我们的JavaScript找到了该微格式的所有实例，并将其转换为用户本地时间，以一种友好的格式显示，并且没有丑陋的时区标识符。

然后，我们可以将其他信息添加到跨度的class属性。 JavaScript代码使用这些代码来决定显示信息的最佳方式。 例如，使用额外的“结束时间”类，JavaScript会将时间转换为倒计时，并以“ 1天3小时”的格式显示。 剩余时间每30秒重新计算一次，因此左侧打开的浏览器标签上不再有过时的信息。 一旦倒数到零，该脚本甚至会在视觉上将比赛和拍卖标记为已结束。

我们期待在设计竞赛和市场上在线获得这些以及许多其他增强功能。

同时，我敢肯定，关于微格式和JavaScript的使用存在很多观点，甚至“微格式”一词是否适用于这种标记模式。 请带上它们。

From: https://www.sitepoint.com/simple-date-and-time-localization-with-javascript/