使用JS+HTML5实现刷新不变的倒计时效果

"js+html5实现页面可刷新的倒计时效果，通过使用JavaScript和HTML5来创建一个即使页面刷新后仍能保持准确倒计时的实现方法。主要利用了浏览器的本地存储（localStorage）功能来保存初始时间，确保倒计时的连续性。" 在Web开发中，有时我们需要在页面上显示一个倒计时，例如倒计时到某个特定事件的发生。然而，如果用户在倒计时期间刷新页面，倒计时通常会重新开始。为了克服这个问题，我们可以利用HTML5的localStorage特性，这是一种在用户浏览器中存储数据的方法，即使页面被刷新，数据也不会丢失。 以下是一个简单的5分钟倒计时的JavaScript实现，它利用了localStorage来存储初始时间： 1. 首先，在页面加载时，我们获取当前时间并将其存储到localStorage的'start'键下： ```javascript localStorage.setItem('start', new Date().getTime()); ``` 2. 接着，定义一个名为`countDown`的函数，它接受开始时间作为参数： ```javascript function countDown(startTime) { var time = setInterval(function() { // ... }, 1000); } ``` 这个函数使用`setInterval`每秒执行一次，直到倒计时结束。 3. 在`countDown`函数内部，我们获取当前时间并计算剩余的秒数和分钟数： ```javascript var currentTime = new Date(); var second = 59 - parseInt(((currentTime.getTime() - startTime) / 1000) % 60); var min = 4 - parseInt((currentTime.getTime() - startTime) / 60000); ``` 注意，这里假设倒计时是从5分钟开始的，所以初始分钟数设置为4。 4. 为了确保显示的分钟和秒数始终是两位数，我们添加前导零： ```javascript if (min < 10) { min = "0" + min; } if (second < 10) { second = "0" + second; } ``` 5. 将计算出的倒计时时间显示在页面上： ```javascript var countDownStr = min + ":" + second; $('#time').html(countDownStr); ``` 6. 当倒计时结束（即分钟和秒数都为0）时，清除定时器： ```javascript if (second == 0 && min == 0) { clearInterval(time); } ``` 这个实现的关键在于，每次页面刷新时，我们都会从localStorage中获取初始时间`startTime`，然后基于这个时间进行倒计时，从而确保倒计时的连续性。这样，无论用户在倒计时过程中如何操作页面，倒计时都会持续进行，直到达到预设的结束时间。 通过结合JavaScript和HTML5的localStorage，我们可以创建一个即使在页面刷新后也能保持准确的倒计时效果，为用户提供更好的体验。这个方法对于那些需要在用户端进行持续计时的应用场景，如限时活动、考试倒计时等，是非常实用的。