0001.倒计时：页面刷新不重置

最新推荐文章于 2023-09-20 16:51:35 发布

原创最新推荐文章于 2023-09-20 16:51:35 发布 · 847 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #html5 #缓存 #html

demo 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现网页倒计时的方法，通过读取sessionStorage中的时间来更新显示的分钟和秒数，实现了精确的倒计时功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- 时分秒分别显示 -->
  <span>00:</span>
  <span id="minute"></span>
  <span>:</span>
  <span id="seconds"></span>

  <script>
    window.onload = function(){
        // 1. 获取分/秒待填充元素
        var minuteEle = document.getElementById("minute")
        var secondsEle = document.getElementById("seconds")
        // 2. 设置初始值
        var minute = 4;
        var seconds = 60;
        var time 
        // 3. 如果在session里面能取到值，说明页面是刷新的，直接获取值
        if(sessionStorage.getItem("countDown")){
            time = sessionStorage.getItem("countDown")
            // 3.1 获取现在的时间，用设置的倒计时时长 - 现在时间 = 还剩时长 
            var time1 = new Date().getTime()
            minute = 4 - 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)
    }
  </script>
</body>
</html>

第0001天：学习打卡。