代码：<div class="readTiming"> <time>00:00:00</time><br/></div><input type="hidden" name="readTime" id="readTime"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script type="text/javascript"> var p = document.getElementsByClassName('readTiming')[0], seconds = 0, minutes = 0, hours = 0, t; function add() { seconds++; if (seconds >= 60) { seconds = 0; minutes++; if (minutes >= 60) { minutes = 0; hours++; } } p.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds); timer(); localStorage.setItem("timeStore", p.textContent); getElementsByClassName('readTiming').innerHTML = localStorage.getItem("timeStore"); $("#readTime").val(p.textContent); } function timer() { t = setTimeout(add, 1000); } timer();</script>在这段代码中，我有一个计时器。现在，我希望如果用户刷新页面，那么它不会改变并且计时器时间将继续，如果用户按下浏览器后退按钮，那么它将节省退出时间。那么，我该怎么做呢？请帮我。
2 回答
人到中年有点甜
TA贡献1895条经验 获得超7个赞
特别是对于您的代码，您似乎总是在设置您的localstorage价值。在填充之前，您必须检查本地存储中的值是否存在。这是通过使用getItemWebStorage 规范中的方法来实现的，null如果项目不存在，该方法会显式返回。根据规范，如果与对象关联的列表中不存在给定键，则此方法必须返回 null。
我使用了session storage类似于本地存储的功能——不同之处在于会话存储生命周期是浏览器中的会话的生命周期。一旦关闭浏览器，该值就会丢失。我已经使用getitem,setitem和remvoveitem会话存储的方法来实现该功能。希望这可以帮助。
<script type="text/javascript">
var p = document.getElementsByClassName('readTiming')[0],
seconds = 0, minutes = 0, hours = 0,
t;
function add() {
if (sessionStorage.getItem("timeStoreSeconds")) {
seconds = sessionStorage.getItem("timeStoreSeconds");
}
if (sessionStorage.getItem("timeStoreMinutes")) {
minutes = sessionStorage.getItem("timeStoreMinutes");
}
if (sessionStorage.getItem("timeStoreHours")) {
hours = sessionStorage.getItem("timeStoreHours");
}
seconds++;
sessionStorage.setItem("timeStoreSeconds", seconds);
if (seconds >= 60) {
seconds = 0;
sessionStorage.removeItem("timeStoreSeconds");
minutes++;
sessionStorage.setItem("timeStoreMinutes", minutes);
if (minutes >= 60) {
minutes = 0;
sessionStorage.removeItem("timeStoreMinutes")
hours++;
sessionStorage.setItem("timeStoreHours", hours);
}
}
p.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
timer();
//localStorage.setItem("timeStore", p.textContent);
//getElementsByClassName('readTiming').innerHTML = localStorage.getItem("timeStore");
$("#readTime").val(p.textContent);
}
function timer() {
t = setTimeout(add, 1000);
}
timer();
</script>
阿波罗的战车
TA贡献1862条经验 获得超6个赞
毫无疑问，现在你已经设法让你的代码工作了——如果你不这样做，那么这可能是有趣的。与其他程序一样，它使用localStorage来维护自脚本开始以来经过的当前秒数。匿名自执行函数的行为类似于setInterval或递归setTimeout- 在每次迭代中，根据函数中布置的格式format和保存到存储中的新值显示经过的时间。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Timer with page refresh</title>
</head>
<body>
<div class='readTiming'>
<time>00:00:00</time>
</div>
<script>
(function(){
function format( time ){
var h = ~~( time / 3600 );
var m = ~~( ( time % 3600 ) / 60 );
var s = time % 60;
return pad( h ) + ':' + pad( m ) + ':' + pad( s );
}
function pad( i ){ return ( parseInt( i ) < 10 ) ? '0' + parseInt( i ) : parseInt( i ) }
const TIMERNAME='continuous_timer';
(function(){
if( !localStorage.getItem( TIMERNAME ) )localStorage.setItem( TIMERNAME, 0 );
var _time=parseInt( localStorage.getItem( TIMERNAME ) );
_time++;
localStorage.setItem( TIMERNAME, _time );
document.querySelector('.readTiming time').textContent = format( _time );
setTimeout( arguments.callee, 1000 );
})()
})();
</script>
</body>
</html>
- 2 回答
- 0 关注
- 167 浏览
添加回答
举报
0/150
提交
取消