前端验证码倒计时

前端验证码倒计时实现

实现的思路

• 后端控制

在点击按钮，发送请求后端进行记录，在重新进入页面是在发送一次请求，获取倒计时时间，是否超过规定的时间

• 前端控制

1. 通过点击按钮，使用缓存记录点击时的时间戳
2. 在重新进入页面时获取时间戳
3. 判断记录的时间和加载的时候是否超过规定的时间
4. 如果没有刷新页面，而是正常走完时间，进入按钮获取初始化

• 前端的思路有了让我们来现实下使用的API
  • 获取元素，设置元素内容这里就不多做解释
  • new Date().getSeconds()
  • Date.now()
  • localStorage.setItem()
  • localStorage.getItem()

代码现实

• 定义初始值

let countDown = 30 // 倒计时30s
let loadingTime = Date.now() // 页面加载时的时间

• 通过点击按钮，使用缓存记录点击时的时间戳

// 获取当前点击时间并缓存到 local Storage
btn.onclick = () => {
  let atPresent = Date.now() // 获取当前点击时间戳
  localStorage.setItem('onClickTime', atPresent) // 设置缓存
  btn.disabled = true
  let time = setInterval(() => {
    countDown--
    btn.innerText = `${countDown}s`
    if (countDown <= 0) {
      clearInterval(time)
      countDown = 30
      btn.innerHTML = '点击'
      btn.disabled = false
    }
  }, 1000);
}

• 在重新进入页面时获取时间戳,并进行做差

//计算时间差
function calc() {
  let onClickTime = localStorage.getItem('onClickTime') * 1 // 转换为数字类型
  let timeDifference = loadingTime - onClickTime // 时间戳差
  let timeDifferenceSeconds = new Date(timeDifference).getSeconds() // 时间戳差转秒
  let calcTime = countDown - timeDifferenceSeconds // 设定好的倒计时减去时间差 = 正在倒计时的时间
  if (timeDifferenceSeconds < countDown) {
    let time = setInterval(() => {
      calcTime--
      btn.innerText = `${calcTime}s`
      if (calcTime <= 0) {
        clearInterval(time)
        btn.disabled = false
        countDown = 30
        btn.innerHTML = '点击'
      }
    }, 1000);
    btn.disabled = true
  } else {
    btn.disabled = false
    countDown = 30
    btn.innerHTML = '点击'
  }
}

• 完整代码(PS：只有js部分代码

let countDown = 30 // 倒计时30s
let loadingTime = Date.now() // 页面加载时的时间
let btn = document.getElementById('btn')
// 加载就调用
calc()

btn.onclick = () => {
  let atPresent = Date.now() // 获取当前点击时间戳
  localStorage.setItem('onClickTime', atPresent) // 设置缓存
  btn.disabled = true
  let time = setInterval(() => {
    countDown--
    btn.innerText = `${countDown}s`
    if (countDown <= 0) {
      clearInterval(time)
      countDown = 30
      btn.innerHTML = '点击'
      btn.disabled = false
    }
  }, 1000);
}

//计算时间差
function calc() {
  let onClickTime = localStorage.getItem('onClickTime') * 1 // 转换为数字类型
  let timeDifference = loadingTime - onClickTime // 时间戳差
  let timeDifferenceSeconds = new Date(timeDifference).getSeconds() // 时间戳差转秒
  let calcTime = countDown - timeDifferenceSeconds // 设定好的倒计时减去时间差 = 正在倒计时的时间
  if (timeDifferenceSeconds < countDown) {
    let time = setInterval(() => {
      calcTime--
      btn.innerText = `${calcTime}s`
      if (calcTime <= 0) {
        clearInterval(time)
        btn.disabled = false
        countDown = 30
        btn.innerHTML = '点击'
      }
    }, 1000);
    btn.disabled = true
  } else {
    btn.disabled = false
    countDown = 30
    btn.innerHTML = '点击'
  }
}

以上只是一个简单的倒计时案例，有什么地方需要改进和扩张的地方,请大神在下方留言~~