[英]Waiting for a page to load before display all elements
大家好我有一个使用JQuery在多个页面上显示的倒数计时器,我正在使用本地存储:
var countdowntimervalue = 100; // Some variable
localStorage.setItem('timer_value', countdowntimervalue); // <-- Set the value
但是,当在页面之间移动并从本地存储中获取值时-如果用户在页面之间足够快地移动,计数器将不会递减计数,-有一种方法可以等到计数器加载后才显示页面,这里是JS:
<script type="text/javascript">
$(function() {
var count = localStorage.getItem('count') || 60
countdown = setInterval(function() {
localStorage.setItem('count'), count);
$("span.countdown").html(minutes + ":" + seconds + " Remaining");
if (count == 0) {
clearInterval(countdown);
localStorage.removeItem('count');
}
count--;
}, 1000);
});
</script>
它开始只是一个注释,但是这里是代码...
$(function() {
var startTime = localStorage.getItem("startTime");
if (startTime == null) {
startTime = new Date().getTime();
localStorage.setItem("startTime", startTime);
}
var countdown = setInterval(function() {
var elapsed = Math.floor((new Date().getTime() - startTime) / 1000);
var remaining = 60 - elapsed;
$("span.countdown").html(remaining + " seconds Remaining");
if (remaining == 0) {
clearInterval(countdown);
localStorage.removeItem("startTime");
}
}, 1000);
});
存储开始时间,然后计算从那时起经过的时间。 如果您想弄得一团糟,那么还可以计算页面之间的时间,以便获得60秒的“页面显示”时间,而不是包含页面转换的60秒。
无论哪种方式,都可以解决您的计时器不停机的直接问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.