JavaScript实现世界各地时间显示

当使用 JavaScript 实现世界各地时间显示时，我们可以利用 Date 对象和其方法，将获取的世界各地时区与本地时间进行计算再进行显示。

以下是实现该功能的完整攻略：

步骤一：获取本地时间

在 JavaScript 中，我们可以通过创建 Date 实例来获取当前本地时间。下面是一个获取本地时间的实例：

const localTime = new Date(); // 获取当前本地时间

步骤二：获取世界各地时区

JavaScript中可以通过 Intl 的 DateTimeFormat 对象获取支持的世界各地时区，下面是获取所有时区的列表：

const timeZones = Intl.DateTimeFormat().resolvedOptions().timeZone;

如果你想手动设置特定的时区，可以使用以下代码：

const timeZone = 'Asia/Shanghai'; // 设置上海时区

步骤三：计算并显示世界各地时间

我们可以使用 toLocaleString() 方法将本地时间转换为特定时区的时间，以将世界各地时间显示在页面上。

下面是一个将本地时间显示为特定时区的时间的例子：

const timeZone = 'Asia/Shanghai'; // 设置上海时区
const localTime = new Date(); // 获取当前本地时间
const options = {timeZone, hour12: false, hour: 'numeric', minute: 'numeric', second: 'numeric'}; // 设置实例化 Date 对象的参数
const timeStr = localTime.toLocaleString('en-US', options); // 将本地时间转换成上海时区的时间，并将时间格式化成 'hour:minute:second' 的字符串
console.log('上海时间：', timeStr); // 控制台输出 上海时间： '13:12:30'

这里我们利用 options 对象来设置实例化 Date 对象的参数，其中：

• timeZone：指定要显示的时区。
• hour12：指示在返回当前小时数的值时，是否使用 12 小时制，默认为 true。
• hour：表示显示小时数，可以是 numeric、2-digit。
• minute：表示显示分钟数，可以是 numeric、2-digit。
• second：表示显示秒数，可以是 numeric、2-digit。

我们还可以使用 Intl 的 DateTimeFormat 对象，将获取的本地时间循环计算与各时区的时间，从而实现世界各地时间的显示。

const timeZones = Intl.DateTimeFormat().resolvedOptions().timeZone; // 获取所有时区

const localTime = new Date(); // 获取本地时间
const options = {hour12: false, hour: 'numeric', minute: 'numeric', second: 'numeric'}; // 设置实例化 Date 对象的参数

timeZones.forEach(timeZone => {
  options.timeZone = timeZone; // 设置时区参数
  const timeStr = localTime.toLocaleString('en-US', options); // 将本地时间转换成所需时区的时间，并将时间格式化成 'hour:minute:second' 的字符串
  console.log(`${timeZone} 时间：${timeStr}`); // 控制台输出 `时区 时间：'hour:minute:second'`
});

以上代码可以获取所有时区的当前时间，并将每个时区的时间分别输出到控制台。我们可以将其修改为将时间输出到页面上，即可实现世界各地时间显示功能。

除了上面的方法之外，我们还可以使用第三方时间库，如 Moment.js，来进行时间的计算与处理。

这是一个使用 Moment.js 实现世界各地时间显示的例子：

// 引入 Moment.js
import moment from 'moment-timezone';

// 获取所有时区
const timeZones = moment.tz.names();

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

// 计算各时区的时间并显示
timeZones.forEach(timeZone => {
  const timeStr = localTime.clone().tz(timeZone).format('HH:mm:ss'); // 设置时区并格式化时间
  console.log(`${timeZone} 时间：${timeStr}`); // 控制台输出 `时区 时间：'hour:minute:second'`
});

以上就是实现 JavaScript 实现世界各地时间显示的完整攻略，希望对您有所帮助！