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

您可以实现以下内容：

确保您节省了localStorage中剩余的时间

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

加载页面时，检查是否有名为countDown的项目，并使用以下值恢复countDown：

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

根据倒计时进度条

2 个答案: