我们正在尝试从5天开始设置倒计时。我们设法使用下面的代码使其工作。但是,当您重新加载页面时,它会刷新回5天。我想知道我们如何做到这一点,以使您在刷新或重新加载页面时不会将其重置为5天。我对Javascript的了解很少,我对下一步的工作一无所知。
<html>
<body>
<span id="countdown" class="timer">7200</span>
<script type="text/javascript">
var first_time = true;
var countdownTimer;
var seconds = document.getElementById('countdown').innerHTML * 60;
//alert(seconds);
if(!isNaN(seconds) && seconds > 0 ) {
function timer() {
if(first_time) {
countdownTimer = setInterval('timer()', 1000);
first_time = false;
}
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = (days < 10 ? "0" : "") + days + ":" + (hours < 10 ? "0" : "") + hours + ":" + (minutes < 10 ? "0" : "") + minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
timer()
//var countdownTimer = setInterval('timer()', 1000);
}
</script>
</body>
</html>
检查网络存储支持,并将其用于存储您的计数器;如果没有支持,则将计数器存储在cookie中:
if (typeof(Storage) !== "undefined") {
// You can use localStorate to store the seconds
localStorage.setItem("seconds", secs);
} else {
// Sorry! No Web Storage support.. use cookie
}
然而,在页面加载时运行的代码开头,请读取计数器并从上次中断的地方继续:
var seconds;
if (typeof(Storage) !== "undefined" && localStorage.seconds) {
seconds = localStorage.getItem("seconds");
} else if (typeof(Storage) === "undefined") {
//read cookie (if using cookie)
} else {
seconds = document.getElementById('countdown').innerHTML * 60;
}