Glittering's blog Glittering's blog
Home
  • 学习手册

    • 《JavaScript教程》
    • 《ES6 教程》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
  • 技术文档
  • 算法
  • 工作总结
  • 实用技巧
  • collect
About
  • Classification
  • Label
GitHub (opens new window)

Glitz Ma

前端开发工程师
Home
  • 学习手册

    • 《JavaScript教程》
    • 《ES6 教程》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
  • 技术文档
  • 算法
  • 工作总结
  • 实用技巧
  • collect
About
  • Classification
  • Label
GitHub (opens new window)
  • 技术文档

  • 算法

  • 工作总结

    • 时区校正
      • 时差转换 getTimezoneOffset()
        • 需要了解的概念:
        • 解决方案
    • 上传下载文件方式总结
    • webpack优化实践
    • webpack基础应用知识总结
    • vue常见原理总结
    • vue基础知识总结
    • react高级特性
    • react基础知识总结
    • 微前端总结
    • 今天总结一下用到的css吧
    • 地图标绘--射线法来计算点在多边形内
    • web异常监控和分析
    • 工作中遇到的css问题记录
    • axios 与 promise
    • 前端优化指南
    • 小程序笔记
    • JS随机打乱数组
    • 非常实用的JavaScript一行代码
  • 实用技巧

  • 收藏夹

  • 技术
  • 工作总结
mamingjuan
2024-09-25
目录

时区校正

# 时差转换 getTimezoneOffset()

如果我们的应用是针对世界各地的,当要把后台(服务器)存的时间展示给不同地区的用户时,这个时间应该经过时差转换、 转成用户客户端本地的时间,然后呈现给用户,即下面用到的getTimezoneOffset()

如果单纯的换算本地时间与其他时区的时间,也要用到getTimezoneOffset()

# 需要了解的概念:

  • 格林威治时间

格林威治子午线上的地方时,或零时区(中时区)的区时叫做格林威治时间,也叫世界时。(更多详细的概念不说了,这里我们不需要。) 比如我们中国是东八区,北京时间是(GMT+08:00)

  • getTimezoneOffset 方法

getTimezoneOffset 方法返回一个整数值,该整数表示了当前计算机上的时间和 UTC 时间之间相差的分钟数。 这些值适用于执行脚本的计算机。 如果从一个服务器脚本调用该方法,返回值适用于服务器。 若从一个客户端脚本调用该方法,则返回值适用于该客户端。

如果您的时间晚于 UTC 时间(例如太平洋夏时制),则此值为正,而如果您的时间早于 UTC 时间(例如日本),则此值为负。

例如,假设位于洛杉矶的客户端与位于纽约的服务器于 12 月 1 日 进行联系。 若在客户端执行 getTimezoneOffset,则将返回 480;若在服务器端执行,则返回 300。

获得本地与格林威治时间的时差:new Date().getTimezoneOffset(),单位为分钟。

已知格林威治时间,换算本地正确时间
本地时间 = 格林威治时间 - 时差
1
2
已知本地时间,换算对应格林威治时间:
格林威治时间 = 本地时间 + 时差
1
2

已知本地时间,换算其他时区的时间

因为时区间的差异是以小时为单位的。所以算出0时区的时间后,再减去或加上相应的小时即可(东N区便+N小时,西N区便-N小时)。 为了方便计算,东N区记做正数,西N区记做负数,即:

目标时区时间 = 本地时间 + 时差 + 时区间隔

# 解决方案

使用的dayjs,所以代码如下

import dayjs from "dayjs"
import utc from "dayjs/plugin/utc"
import timezone from "dayjs/plugin/timezone"

dayjs.extend(utc)
dayjs.extend(timezone)
dayjs.tz.setDefault("Asia/Shanghai")

// 使用时
dayjs.tz(new Date(time)).format(formatStr)
1
2
3
4
5
6
7
8
9
10
上次更新: 2025/04/07, 01:42:58
常见的leetCode题目与解题思路
上传下载文件方式总结

← 常见的leetCode题目与解题思路 上传下载文件方式总结→

Copyright © 2015-2025 Glitz Ma
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式