实现 时区转换器 工具

分类：general ｜ 标签：时区、时间、转换、会议 选定时刻一键查看全球多时区对应时间，适合跨国协作

2.1 功能说明

选定时刻一键查看全球多时区对应时间，适合跨国协作

2.1.1 使用指南

使用指导

选定一个本地时刻，一键查看它在全球多个时区的对应时间，适合跨国协作与会议排期。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• fmt()
• offsetOf()
• render()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, onMounted } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const zones = [
  { label: '北京 (UTC+8)', value: 'Asia/Shanghai' },
  { label: '东京 (UTC+9)', value: 'Asia/Tokyo' },
  { label: '伦敦 (UTC+0/+1)', value: 'Europe/London' },
  { label: '纽约 (UTC-5/-4)', value: 'America/New_York' },
  { label: '洛杉矶 (UTC-8/-7)', value: 'America/Los_Angeles' },
  { label: '巴黎 (UTC+1/+2)', value: 'Europe/Paris' },
  { label: '悉尼 (UTC+10/+11)', value: 'Australia/Sydney' },
  { label: '莫斯科 (UTC+3)', value: 'Europe/Moscow' }
]
const dt = ref('')
const base = ref('Asia/Shanghai')
const rows = ref([])

function fmt(d, zone) {
  return new Intl.DateTimeFormat('zh-CN', {
    timeZone: zone, year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit', hour12: false
  }).format(d)
}
function offsetOf(d, zone) {
  const s = d.toLocaleString('en-US', { timeZone: zone })
  const local = new Date(s)
  const diff = (local - d) / 3600000
  const sign = diff >= 0 ? '+' : '-'
  return 'UTC' + sign + Math.abs(diff).toFixed(1)
}
function render() {
  if (!dt.value) { rows.value = []; return }
  const baseDate = new Date(dt.value.replace(' ', 'T'))
  // 把 base 时区的输入换算为真实 UTC 时刻
  let utcMs = baseDate.getTime()
  const baseParts = new Intl.DateTimeFormat('en-US', {
    timeZone: base.value, year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
  }).formatToParts(baseDate)
  const m = {}
  baseParts.forEach((p) => (m[p.type] = p.value))
  utcMs = Date.UTC(+m.year, +m.month - 1, +m.day, +m.hour, +m.minute, +m.second)
  const utcDate = new Date(utcMs)
  rows.value = zones.map((z) => ({ label: z.label, time: fmt(utcDate, z.value), offset: offsetOf(utcDate, z.value) }))
}
function useNow() {
  const d = new Date()
  dt.value = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:00`
  render()
}
onMounted(useNow)

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/timezone-converter