vue获取不同时区的时间

使用vue获取悉尼，纽约，东京，北京的年月日，星期，时分秒时间，格式为YYYY-mm-dd WWW HH:MM:SS

在Vue中，使用toLocaleString方法来获取指定时区的时间，并通过传递一个options对象来指定需要获取的日期和时间格式，包括年月日、时分秒和星期的缩写。然后通过formatDate方法将获取到的时间字符串进行格式化，生成"YYYY-mm-dd WWW HH:MM:SS"的时间格式。最后将格式化后的时间保存在Vue实例的对应数据属性中，然后在页面上显示出来。setInterval方法每秒钟调用一次getTimes方法，以更新时间的显示。下面是一个示例代码：

<template>
  <div>
    <h2>悉尼时间: {{ sydneyTime }}</h2>
    <h2>纽约时间: {{ newYorkTime }}</h2>
    <h2>东京时间: {{ tokyoTime }}</h2>
    <h2>北京时间: {{ beijingTime }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sydneyTime: '',
      newYorkTime: '',
      tokyoTime: '',
      beijingTime: ''
    };
  },
  mounted() {
    this.getTimes();
    setInterval(this.getTimes, 1000); // 每秒钟更新一次时间
  },
  methods: {
    getTimes() {
      const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', weekday: 'short' };

      const sydneyDate = new Date().toLocaleString('en-US', { timeZone: 'Australia/Sydney', ...options });
      const newYorkDate = new Date().toLocaleString('en-US', { timeZone: 'America/New_York', ...options });
      const tokyoDate = new Date().toLocaleString('en-US', { timeZone: 'Asia/Tokyo', ...options });
      const beijingDate = new Date().toLocaleString('en-US', { timeZone: 'Asia/Shanghai', ...options });

      this.sydneyTime = this.formatDate(sydneyDate);
      this.newYorkTime = this.formatDate(newYorkDate);
      this.tokyoTime = this.formatDate(tokyoDate);
      this.beijingTime = this.formatDate(beijingDate);
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      const hours = ('0' + date.getHours()).slice(-2);
      const minutes = ('0' + date.getMinutes()).slice(-2);
      const seconds = ('0' + date.getSeconds()).slice(-2);
      const weekday = date.toLocaleDateString('zh-CN', { weekday: 'short' });

      return `${year}-${month}-${day}  ${weekday} ${hours}:${minutes}:${seconds}`;
    }
  }
};
</script>

效果：

如果你想指定中文作为语言环境来获取悉尼的本地时间，可以将第一个参数改为"zh-CN"，如下所示：

new Date().toLocaleString("zh-CN", {
  timeZone: "Australia/Sydney",
});

date.toLocaleDateString('zh-CN', { weekday: 'short' });

date.toLocaleDateString("zh-CN", { weekday: "short" })是使用JavaScript的Date对象的toLocaleDateString方法来获取指定日期的星期缩写，使用中文作为语言环境。

在这段代码中，date是一个Date对象，通过调用toLocaleDateString方法，并传递"zh-CN"作为第一个参数指定中文作为语言环境，以及一个包含weekday: "short"的options对象，来获取指定日期的星期缩写。

例如，对于一个日期对象const date = new Date("2021-10-27")，执行date.toLocaleDateString("zh-CN", { weekday: "short" })将返回星期三的中文缩写"周三"。

具体来说，weekday是options对象的一个属性，用于指定显示星期的形式。通过将weekday设置为"short"，可以让toLocaleDateString方法返回日期的星期缩写。

你可以根据需要调整weekday的值来获取不同形式的星期表示，例如"long"表示星期的完整名称，"narrow"表示星期的简短形式等。

请注意，toLocaleDateString方法返回的结果取决于浏览器和操作系统的本地化设置。因此，不同的环境下可能会有不同的结果。

timeZone: "Australia/Sydney"是在使用toLocaleString方法时，通过options对象中的timeZone属性来指定所需的时区为悉尼（Sydney）的时区。

在JavaScript中，Date对象的toLocaleString方法可以接受一个可选的options对象作为参数，用于指定日期和时间的格式、语言环境以及时区等信息。

通过将timeZone属性设置为"Australia/Sydney"，我们告诉toLocaleString方法要获取的时间是悉尼的本地时间，而不是默认的本地时间。

这样，当我们执行类似于new Date().toLocaleString("en-US", { timeZone: "Australia/Sydney" })的代码时，将返回表示当前悉尼时间的字符串。

请注意，时区的名称遵循IANA时区数据库的命名约定，可以指定各个城市或地区的时区。在这个例子中，我们使用"Australia/Sydney"来表示悉尼的时区。不同的时区名称可以查阅时区数据库来获取。