微信页面倒计时代码（解决safari不兼容date的问题）

接下来我将为您详细讲解如何在微信页面中使用倒计时代码，并解决 Safari 不兼容 Date 的问题。

标准的倒计时代码

首先，我们先来看一下在常规网页中使用的倒计时代码：

function countDown(second, callback) {
  let timer = setInterval(() => {
    callback(second--)
    if (second < 0) {
      clearInterval(timer)
    }
  }, 1000)
}

以上代码定义了一个 countDown 函数，传入倒计时秒数和回调函数，并使用 setInterval 以每秒 1000 毫秒的频率执行回调函数并倒计时，直到时间为 0。

在微信浏览器中常常会遇到 Safari 不兼容 Date 的问题，为了解决这个问题，我们需要使用正则表达式来将日期字符串转化为时间戳：

解决 Safari 不兼容 Date 的问题

function countDownSafari(second, callback) {
  let startTime = Date.parse(new Date()) / 1000
  let timer = setInterval(() => {
    let now = new Date()
    let endTime = Date.parse(now) / 1000
    let lag = endTime - startTime
    let timestamp = second - lag
    if (timestamp < 0) {
      clearInterval(timer)
      return
    }
    callback(timestamp)
  }, 1000)
}

以上代码首先获取当前时间戳并记录，借助 setInterval 获取某个时间点的时间戳并计算时间差，在 Safari 中也能够正常倒计时。在倒计时函数的回调中，我们将倒计时的秒数传入回调函数，可以根据需求将其展示在页面上。

接下来，我们来看两个具体的使用场景示例。

示例 1：倒计时兑换

假如我们需要实现一个倒计时兑换功能，当用户购买某个商品后，需要在 5 分钟之内进行兑换，否则兑换的机会就会失去。那么我们可以这么实现：

let exchangeTime = 5 * 60  // 兑换时间 5 分钟
let canExchange = true  // 是否可以进行兑换

// 点击兑换按钮的事件处理函数
function onClickExchange() {
  if (canExchange) {
    canExchange = false  // 设置不可再次兑换
    countDownSafari(exchangeTime, (timestamp) => {
      if (timestamp === 0) {
        canExchange = true  // 重新设置可用性
      }
      updateCountDownWithSecond(timestamp)
    })
  }
}

// 更新页面倒计时的函数
function updateCountDownWithSecond(second) {
  const minute = Math.floor(second / 60)
  const sec = second % 60
  const minuteStr = appendPrefixNumber(minute)
  const secStr = appendPrefixNumber(sec)
  const timeStr = `${minuteStr}:${secStr}`
  const countDownText = document.querySelector('.count-down-text')
  countDownText.innerText = timeStr
}

// 补全数字前缀
function appendPrefixNumber(num) {
  return num < 10 ? `0${num}` : num
}

以上代码中，点击兑换按钮时会首先判断是否可进行兑换，如果是，则调用倒计时函数开始倒计时，如果在倒计时过程中时间到了，就会重新设置兑换为可用状态，否则在页面上调用 updateCountDownWithSecond 函数来更新倒计时，而 appendPrefixNumber 函数则是为了保证倒计时数字占两位数，避免出现 1:3 这种丑陋的显示。

示例 2：倒计时抽奖

接下来假设我们需要实现一个倒计时抽奖功能，每隔一定时间就会随机抽取一名中奖用户，但是需要在页面上显示明确的倒计时。这个功能同样可以用我们上面提到的倒计时代码实现：

let drawInterval = 10  // 抽奖间隔 10 秒

// 点击开始抽奖按钮的事件处理函数
function onClickStartDraw() {
  setDrawInterval()
}

// 设置随机抽奖的间隔函数
function setDrawInterval() {
  countDownSafari(drawInterval, (timestamp) => {
    if (timestamp === 0) {
      doDraw()
      setDrawInterval()
    }
    updateCountDownWithSecond(timestamp)
  })
}

// 进行随机抽奖的函数
function doDraw() {
  const userList = ['user1', 'user2', 'user3', 'user4', 'user5']
  const luckyIndex = Math.floor(Math.random() * userList.length)
  const luckyUser = userList[luckyIndex]
  console.log(`恭喜 ${luckyUser} 中奖！`)
}

以上代码中，在点击开始抽奖按钮的事件处理函数中，我们首先调用了setDrawInterval，这个函数是借助倒计时函数实现的，每隔 10 秒就会调用一次 doDraw 函数完成随机抽奖的功能，如果在 10 秒的倒计时过程中用户又再次点击了“开始抽奖”按钮，就需要取消之前的倒计时，重新进行倒计时，这个可以通过 setTimeout 和 clearTimeout 来实现。