根据倒计时的进度条

Question

我想在 div 中显示基于 7 分钟倒计时的进度条：<div id = "quiz-time-left"> 0:06:24 </ div>

如果页面重新加载，我需要不要重置进度条。是否可以使用 CSS 和脚本来表示计时器显示的内容？

我用这个css进度条：

 #quiz-time-left {    
width: 0;
    height: 100%;
    -webkit-animation: progreso 420s linear;
            animation: progreso 420s linear;
color: #eb7260;
background: #eb7260;
 }
#page-mod-quiz-summary #quiz-timer {
    text-align: center;
    display: none;
position: absolute;
    left: -50px;
    top: -50px;
}
#quiz-timer {
border: 2px solid #eb7260;
text-indent: -9999px;
display:block;
    font-size: 0px;
    height: 35px;
}
@-webkit-keyframes progreso {
    0% {
        width: 100%;;
    }
    100% {
        width: 0;
    }
}

@keyframes progreso {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

html

<div id="quiz-timer" role="timer" aria-atomic="true" aria-relevant="text" style="display: block;">Time left: <div id="quiz-time-left">0:06:41</div></div>

谢谢。最好的问候。

Answer 1

您可以做的是使用 localStorage 来存储计时器的当前状态，并且每一秒都会减少这个数字。

所以当页面加载完成后，测试localStorage是否未定义，如果是则设置为420。如果localStorage != undefined则从localStorage中存储的时间恢复动画。

Answer 2

你可以这样实现：

确保节省本地存储中剩余的时间

window.onbeforeunload = function(timeLeft) {
       localStorage.setItem('countDown', timeLeft);
    }

加载页面时检查是否有一个名为countDown的项目并使用该值恢复countDown：

if(localStorage['countDown'] {
    resumeCountdown(localStorage.getItem('countDown');
}