js显示世界时间示例(包括世界各大城市)

2023年5月27日下午12:21 • JavaScript

下面就是“js显示世界时间示例(包括世界各大城市)”的完整攻略。

思路概述

本代码的主要思路是通过获取当前时间（即本地时间），将其转换为世界各大城市的对应时间，并在页面上显示出来。具体实现方法是使用 JavaScript 和 Moment.js 库。

实现步骤

引入 Moment.js 库

Moment.js 是一个 JavaScript 日期处理库，可以方便地处理日期、时间和持续时间。因此，在使用 JavaScript 显示世界时间之前，我们先需要在页面上引入 Moment.js 库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

创建各大城市的时区对象

我们需要创建一个对象，包含各大城市所在的时区。这些时区可以通过 Moment.js 库提供的 Moment Timezone 进行获取。

var timezones = {
  "New York": "America/New_York",
  "London": "Europe/London",
  "Tokyo": "Asia/Tokyo",
  "Sydney": "Australia/Sydney"
};

获取当前时间并转换为各大城市的时间

接下来，我们通过 JavaScript 实现获取当前本地时间，并将其转换为各大城市的对应时间。

// 获取本地时间
var localTime = moment();

// 循环遍历各大城市时区，计算出对应时间，并存储在数组中
var cityTimes = [];
for (var city in timezones) {
  var cityTimeZone = timezones[city];
  cityTimes.push(moment.tz(localTime, cityTimeZone));
}

在页面上显示各大城市的时间

最后，我们需要将各大城市的时间显示在页面上。

for (var i = 0; i < cityTimes.length; i++) {
  var city = Object.keys(timezones)[i];
  var time = cityTimes[i].format('YYYY-MM-DD HH:mm:ss');
  var html = '<div>' + city + ': ' + time + '</div>';
  document.body.insertAdjacentHTML('beforeend', html);
}

示例说明

下面是两条示例说明，分别展示如何使用该代码显示世界时间和如何添加新的城市时区。

示例一：显示世界时间

首先，在页面上引入 Moment.js 库和上述 JavaScript 代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>世界时间</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script>
    // 上述 JavaScript 代码
  </script>
</head>
<body>
</body>
</html>

然后，在页面打开后，JavaScript 会自动获取当前本地时间，并将其转换为世界各大城市的对应时间，并在页面上显示出来。

示例二：添加新的城市时区

可以通过修改 timezones 对象，添加新的城市时区。

var timezones = {
  "New York": "America/New_York",
  "London": "Europe/London",
  "Tokyo": "Asia/Tokyo",
  "Sydney": "Australia/Sydney",
  "Shanghai": "Asia/Shanghai" // 添加上海时区
};

改动后，页面重新加载后，上海的时间也会被显示出来。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js显示世界时间示例(包括世界各大城市) - Python技术站