js:弹窗页面开始30分钟倒计时，刷新页面倒计时不重置

最新推荐文章于 2022-11-03 14:44:50 发布

卿音

最新推荐文章于 2022-11-03 14:44:50 发布

阅读量1.9k

点赞数 1

分类专栏： HTML 文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_45204443/article/details/125764061

版权

HTML JavaScript 倒计时 sessionStorage 时间处理

关键词由CSDN通过智能技术生成

HTML 专栏收录该内容

5 篇文章

订阅专栏

首先，页面的数字自动跳转时间，且刷新不会重置。

在html内容：

 <span id="minute"></span>
 <span>分</span>
 <span id="seconds"></span>
 <span>秒</span>

js部分：

$(document).ready(function(){

window.onload = function(){
    //倒计时
    // 1. 获取分/秒待填充元素
    var minuteEle = document.getElementById("minute")
    var secondsEle = document.getElementById("seconds")
    // 2. 设置初始值
    var minute = 29;
    var seconds = 60;
    var time 
    // 3. 如果在session里面能取到值，说明页面是刷新的，直接获取值
    if(sessionStorage.getItem("countDown")){
        time = sessionStorage.getItem("countDown")
        // 3.1 获取现在的时间，用设置的倒计时时长 - 现在时间 = 还剩时长 
        var time1 = new Date().getTime()
        minute = 29 - Math.floor((time1 - time) / 1000 / 60)  //分
        seconds = 60 - Math.floor((time1 - time) / 1000 % 60)  //秒
    }else{
        // 4. 否则获取当前时间作为开始时间，并存入session
        time = new Date().getTime()
        sessionStorage.setItem('countDown',time)
    }
    // 5. 设置计时器
    var timer = setInterval(function(){
      // 5.1 如果上一次秒是‘00’=> 04:00 本次直接为03:59
      if(seconds == '00' && minute > 0){
        seconds = 59;
        minute--
      }else{
        // 5.2 否则直接秒数减一
        seconds--;
      }
      // 5.3 如果秒为0-9 则拼接为 ‘08’
      if(seconds >= 0 && seconds < 10){
        seconds = '0' + Number(seconds)
      }
      // 5.4 如果分为0-9 则拼接为 ‘04’
      if(minute >= 0 && minute < 10){
        minute = '0' + Number(minute)
      }
      // 5.5 将分秒填充进元素显示
      secondsEle.innerHTML = seconds
      minuteEle.innerHTML = minute
      // 5.6 00:00 倒计时结束，清除计时器
      if(minute == 0 && seconds == 0){
        clearInterval(timer)
      }
    },1000)
}
})

效果：

此处的效果是没有颜色的。