个人文档
  • AI编程Cursor
  • GPT使用笔记
  • npm常用库合集
  • 同步用
  • 小Demo们
  • 工具网站教程集合
  • HTML、CSS 工具方法集合
    • HTML 全局属性
    • css常用功能
    • font-face 字体|子集相关
    • iframe父子页面传值
    • input输入优化
    • loading状态
    • nodejs使用谷歌邮箱发邮件
    • 为 Dom 自定义事件监听
    • 初始html的head标签配置
    • 拼音输入中文汉字的事件监听
    • 文字颜色效果
    • 文档片段范围 Range
    • 移动端开发-rem
    • 等宽字体推荐
    • 网站SEO优化注意点
    • 邮件html模板
  • JS 工具方法集合
    • Axios 简单使用
    • Axios 简单封装
    • Gitbook的安装和使用
    • Github 登录开发
    • HTML转为纯文本
    • JS 中强大的操作符
    • cookie 操作
    • js 动态加载js资源
    • js 常用功能语句
    • js取代trycatch的方法封装
    • js接口下载二进制
    • script 标签的异步属性
    • 判断当前是移动端还是pc端
    • 刷新token队列管理
    • 前端多线程 Web Worker
    • 加密-AES对称加密
    • 加密-node进行rsa加密解密
    • 地区省市区三级联动的地址数据 + 功能
    • 复制插件
    • 开发时环境变量
    • 得到随机图片
    • 数字格式整理集合
    • 数学计算插件
    • 时间格式整理
    • 获取ip地址
    • 获取url传参
    • 进制转换和位运算符
    • 页面隐藏|激活|关闭的监听
  • JS 知识点研究
    • Babel 历史和原理
    • Babel 配置和使用
    • Function 的 apply、call、bind
    • HTTP浏览器缓存粗解
    • Source map 文件还原为源码
    • TS常用技巧
    • js 的加载和模块化
    • js 的新数据类型 Symbol
    • js的代理对象 proxy 和 defineProperty
    • js的原型链 prototype
    • vite 打包体积优化
    • webpack 可视化打包文件大小插件
    • webpack 基础使用配置
    • webpack 版本5的报错
    • yeoman 开发脚手架的工具
    • 同步异步和微任务宏任务
    • 移动端调试---谷歌工具+eruda+vconsole
    • 转换-Blob URL
    • 转换-FileReader
    • 转换-Js文件类型和转换
    • 转换-前端开发的URL的编码和解码
    • 转换-字符串和Base 64的转换
  • Node 和 Npm 相关
    • Node 开发环境配置
    • express + jwt 校验
    • node 常用方法
    • node后台服务器-PM2
    • node基本使用
    • npm 中依赖的版本问题
    • npm 功能使用
    • npm指令说明和其他对比
    • nvm版本管理+自动切换node版本
  • React 学习
    • React Hook
    • React 项目基础开发
    • React.memo 和 React.PureComponent
    • React懒加载进阶
    • useContext Hook
    • useEffect Hook
    • useMemo 和 useCallback - Hook
    • useRef Hook
    • useState Hook
    • 同步修改变量功能封装 useVal for react
    • 轻便的传值组件
  • Rust 语言相关
    • Rust 基本
    • Rust 基础学习
    • Rust 调用 Object-C 的API
    • Tauri 基本使用
    • Tauri 是什么
  • VUE 学习
    • Vue3 使用
    • Vue3使用hook
    • Vue开发小技术点
    • vue路由切换时的动画效果
    • 花式引入组件和资源-打包时拆包减少js体积
  • Web3相关
    • Web3.0开发上-准备和概念理解
    • Web3.0开发下-功能代码示例
    • 以太坊区块链和Web3.0
    • 开发智能合约
  • python
    • pyenv版本管理工具
    • python初始化
    • python基本概念
    • venv虚拟环境
  • 个人其他
    • Steam Deck的基本设置和插件
  • 其他编程相关
    • Git教程和常用命令
    • Java开发-JDK和Maven的安装和卸载
    • Jenkins安装和基本使用
    • Linux系统指令
    • Mac 使用2K屏幕开启缩放
    • Mac 使用VS code打开项目
    • Mac 安装 Homebrew
    • Mac 的终端 shell 与 zsh
    • Mac 软件和插件
    • MacBook使用建议
    • Mac升降级到指定版本的系统
    • Mac安装Zsh
    • Mac安装软件各种提示
    • Mac系统脚本语言 AppleScript 的使用
    • Mac终端代理工具
    • Markdown(md)文档开发-Typora
    • Mysql 的安装和使用
    • Nginx 安装和基础使用
    • Nginx 稍微高深的配置
    • Slate - Api 的文档开发工具
    • Sublime配置
    • Ubuntu的 apt-get 使用
    • VScode配置
    • Windows 软件和插件
    • curl 工具使用
    • github 网站访问优化
    • host 文件
    • inquirer 终端中和用户交互
    • uTools的插件开发教程
    • vim 文本编辑功能
    • 使用 Github Pages 免费部署网站
    • 压缩指令 zip 和 unzip
    • 油猴的安装和开发(Tampermonkey)
    • 阿里云简略使用
  • 微信开发
    • 微信小程序开发
    • 微信开发必读
    • 微信开发提前购买域名
    • 微信手机打开的页面中授权登录
    • 微信扫码登录
    • 微信服务号登录+推送服务提醒
    • 自定义分享卡片-node.js实现
  • 数据结构与算法
    • KMP算法
    • Wildcard字符串分析算法
    • 二叉树
    • 字典树
    • 时间复杂度浅析
    • 算法神器——动态规划
Powered by GitBook
On this page
  • 时间格式整理
  • 时间戳转易读时间格式
  • 时间间隔转为易读的时间格式(天)
  • 功能更完善的时间格式转换
  • UTC(GMT)时间

Was this helpful?

  1. JS 工具方法集合

时间格式整理

title: 时间格式整理 id: 684c43074da51ccac6dfbeda30c5a563 tags: [] date: 2000/01/01 00:00:00 updated: 2024/03/02 07:48:30 isPublic: true --#|[分隔]|#--

时间格式整理

对时间戳,或者毫秒级的时间间隔进行格式处理,应该算是很常见的需求。

时间戳转易读时间格式

/**
 * 时间戳转易读时间格式
 * @param {number} timestamp 时间戳
 */
export function getDate(timestamp?: Date) {
  let date = timestamp || new Date()
  let y = date.getFullYear()
  let m: string | number = date.getMonth() + 1
  m = m < 10 ? ('0' + m) : m
  let d: string | number = date.getDate()
  d = d < 10 ? ('0' + d) : d
  let h: string | number = date.getHours()
  h = h < 10 ? ('0' + h) : h
  let minute: string | number = date.getMinutes()
  minute = minute < 10 ? ('0' + minute) : minute
  let second: string | number = date.getSeconds()
  second = second < 10 ? ('0' + second) : second
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
}

时间间隔转为易读的时间格式(天)

/**
 * 时间间隔转为易读的时间格式(天)
 * @param {number} timespace 时间间隔
 * @param {array | undefined} 天/时/分/秒 后面的分隔符
 */
export function getDateSpace(timespace, [d, h, m, s] = [':', ':', ':', '']) {
  timespace = timespace - 0
  if (!timespace || typeof(timespace) !== 'number' || timespace <= 0) return `00${d}00${h}00${m}00${s}`
  let oneS = 1000 // 1s
  let oneM = oneS * 60 // 1分钟
  let oneH = oneM * 60 // 1小时
  let oneD = oneH * 24 // 1天
  let temp = timespace
  let day = Math.floor(temp / oneD)
  temp = temp % oneD
  let hour = Math.floor(temp / oneH)
  temp = temp % oneH
  let minute = Math.floor(temp / oneM)
  temp = temp % oneM
  let second = Math.floor(temp / oneS)
  day = day < 10 ? ('0' + day) : day
  hour = hour < 10 ? ('0' + hour) : hour
  minute = minute < 10 ? ('0' + minute) : minute
  second = second < 10 ? ('0' + second) : second
  return `${day}${d}${hour}${h}${minute}${m}${second}${s}`
}

功能更完善的时间格式转换

/**
 * 时间日期转换
 * @param date 当前时间,new Date() 格式
 * @param format 需要转换的时间格式字符串
 * @description format 字符串随意,如 `YYYY-mm、YYYY-mm-dd`
 * @description format 季度:"YYYY-mm-dd HH:MM:SS QQQQ"
 * @description format 星期:"YYYY-mm-dd HH:MM:SS WWW"
 * @description format 几周:"YYYY-mm-dd HH:MM:SS ZZZ"
 * @description format 季度 + 星期 + 几周:"YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
 * @returns 返回拼接后的时间字符串
 */
export function formatDate(date: Date, format: string): string {
	let we = date.getDay(); // 星期
	let z = getWeek(date); // 周
	let qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
	const opt: { [key: string]: string } = {
		'Y+': date.getFullYear().toString(), // 年
		'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始,要+1)
		'd+': date.getDate().toString(), // 日
		'H+': date.getHours().toString(), // 时
		'M+': date.getMinutes().toString(), // 分
		'S+': date.getSeconds().toString(), // 秒
		'q+': qut, // 季度
	};
	// 中文数字 (星期)
	const week: { [key: string]: string } = {
		'0': '日',
		'1': '一',
		'2': '二',
		'3': '三',
		'4': '四',
		'5': '五',
		'6': '六',
	};
	// 中文数字(季度)
	const quarter: { [key: string]: string } = {
		'1': '一',
		'2': '二',
		'3': '三',
		'4': '四',
	};
	if (/(W+)/.test(format))
		format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
	if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]);
	if (/(Z+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 3 ? '第' + z + '周' : z + '');
	for (let k in opt) {
		let r = new RegExp('(' + k + ')').exec(format);
		// 若输入的长度不为1,则前面补零
		if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0'));
	}
	return format;
}

/**
 * 获取当前日期是第几周
 * @param dateTime 当前传入的日期值
 * @returns 返回第几周数字值
 */
export function getWeek(dateTime: Date): number {
	let temptTime = new Date(dateTime.getTime());
	// 周几
	let weekday = temptTime.getDay() || 7;
	// 周1+5天=周六
	temptTime.setDate(temptTime.getDate() - weekday + 1 + 5);
	let firstDay = new Date(temptTime.getFullYear(), 0, 1);
	let dayOfWeek = firstDay.getDay();
	let spendDay = 1;
	if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1;
	firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
	let d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000);
	let result = Math.ceil(d / 7);
	return result;
}

UTC(GMT)时间

定义

北京早上7点,太阳刚升起时,地球另一个地方的太阳刚刚落下,那里的时间可能是晚上7点。

为了统一全球时间,科学界定义了协调世界时,又称世界统一时间、世界标准时间、国际协调时间,

由于英文(CUT)和法文(TUC)的缩写不同,作为妥协,简称UTC。

协调世界时被提出前,使用的是格林尼治标准时间(旧称格林威治标准时间),简写为 GMT。

不过因为 GMT 所在本就是0时区,所以在前端开发来说,GMT === UTC。

整个地球分为二十四时区,UTC 和 GMT 定义的 0 时区,比北京慢8小时,北京是东八区,也就是说北京这个东八区早上8点整的时候,UTC 和 GMT 的标准时间是 早上0点。

获取当前所处的时区

以下代码可以获取当前所处的时区,比 UTC 要早的为负值,晚的为正值。

比如在北京打印的值为 -8,因为北京的时间比UTC要早8小时,当北京为中午12点时,UTC时间是凌晨4点。

// 本地所处的时区
let timezone = new Date().getTimezoneOffset() / 60

获取当前UTC时间

在全球任意位置执行下面的代码,可以得到当前UTC时间,所以在全球任意位置执行下面代码,得到的值都是一样的。

function getUTCDate() {
  let timezone = new Date().getTimezoneOffset() / 60 // 相差的时区
  let spaceTime = timezone * 1000 * 3600 // 差一个时区,需要补1小时
  let UTCDate = new Date(Date.now() + spaceTime)
  return UTCDate
}

console.log(getUTCDate())

其他时区的时间转为本地时间

在A时区执行下面的方法,传入一个时区B和一个时间对象C,会返回当B时区为C时间时,A时区的时钟显示的时间。

/**
 * 把某个其他时区的时间,转换为用户当地时区的时间
 * @params dataZone 数据的时区
 * @params dataTime 数据的时间,毫秒时间戳或 Date 格式或可以转为 Date 的数据格式
 * @returns 返回在用户当地时区的时间对象
 */
export function getZoneTime(dataZone: number, dataTime: number | Date = new Date()): Date {
  // dataTime 转为毫秒时间戳
  dataTime = typeof(dataTime) === 'number' ? dataTime : (new Date(dataTime)).getTime()
  let nowTimeZone = new Date().getTimezoneOffset() / 60 // 获取当前的时区
  let timeZoneSpace = dataZone - nowTimeZone // 时区相差的程度,差 1 就需要补一个小时
  let spaceTime = timeZoneSpace * 1000 * 3600
  let newDateTime = dataTime + spaceTime
  return new Date(newDateTime)
}

使用示例:

const dataZone = 0 // 有一个时间,这个时间是 0 时区,也就是 UTC 和 GMT 的标准时间
const dataTime = '2022/10/10 10:00:00' // 是某天的上午十点
// 在北京打印,因为北京是东八区,比 UTC 快8个钟头
console.lg(getZoneTime(dataZone, dataTime))
// 打印:'2022/10/10 18:00:00'
Previous数学计算插件Next获取ip地址

Last updated 3 months ago

Was this helpful?