如何使用Day.js实现带时区的剩余天数倒计时功能？

前置准备 #

首先需要引入Day.js的几个核心插件，原生Day.js不支持时区处理和时长计算，必须依赖以下插件：

• utc：处理UTC时间转换
• timezone：支持时区解析与转换
• duration：计算和格式化时间差

实现步骤 #

1. 导入并注册插件

// 引入Day.js核心及所需插件
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'
import duration from 'dayjs/plugin/duration'

// 注册插件
dayjs.extend(utc)
dayjs.extend(timezone)
dayjs.extend(duration)

2. 解析带时区的目标时间

先明确时间所属时区（比如示例中的时间假设为Asia/Shanghai时区），将输入的时间字符串转换为带时区的Day.js对象：

// 指定目标时区，根据实际场景修改
const targetTimezone = 'Asia/Shanghai'

// 解析开始时间和结束时间，严格匹配输入格式
const startTime = dayjs.tz('24-10-2023 23:50:25', 'DD-MM-YYYY HH:mm:ss', targetTimezone)
const endTime = dayjs.tz('28-10-2023 15:35:10', 'DD-MM-YYYY HH:mm:ss', targetTimezone)

3. 计算并格式化时间差

通过diff方法获取时间差的毫秒数，再用duration对象提取天、时、分、秒：

// 计算两个时间的毫秒差
const diffMs = endTime.diff(startTime)
// 将毫秒差转换为可操作的时长对象
const timeDiff = dayjs.duration(diffMs)

// 提取各时间单位
const days = timeDiff.days()
const hours = timeDiff.hours()
const minutes = timeDiff.minutes()
const seconds = timeDiff.seconds()

// 格式化为目标字符串
const countdownText = `${days} days | ${hours} hrs | ${minutes} mins | ${seconds} sec`
console.log(countdownText) // 输出：3 days | 15 hrs | 44 mins | 45 sec

4. 实现实时倒计时（可选）

如果需要每秒更新倒计时，用setInterval实时计算当前时间与结束时间的差：

function updateCountdown() {
  // 获取当前时区的时间
  const currentTime = dayjs.tz(targetTimezone)
  const remainingMs = endTime.diff(currentTime)

  // 倒计时结束时停止更新
  if (remainingMs <= 0) {
    console.log('倒计时结束')
    clearInterval(countdownTimer)
    return
  }

  const remainingDuration = dayjs.duration(remainingMs)
  const displayText = `${remainingDuration.days()} days | ${remainingDuration.hours()} hrs | ${remainingDuration.minutes()} mins | ${remainingDuration.seconds()} sec`
  console.log(displayText)
}

// 初始执行一次
updateCountdown()
// 每秒更新一次
const countdownTimer = setInterval(updateCountdown, 1000)

注意事项 #

• 必须确保开始时间、结束时间、当前时间都统一到同一个时区，避免计算误差
• 解析时间时的格式字符串（DD-MM-YYYY HH:mm:ss）要和输入的时间格式完全匹配，否则会解析失败
• 如果在浏览器环境使用，部分场景可能需要额外引入Day.js的时区数据文件，确保时区转换准确

内容的提问来源于stack exchange，提问作者tommychoo