Как сделать так, чтобы таймер обратного отсчета не запускался с самого начала при обновлении страницы - PullRequest
0 голосов
/ 02 сентября 2018

Я получил код обратного отсчета от этого хранилища , и я сделал некоторые изменения, и я хочу, чтобы обратный отсчет не начинался с самого начала, когда я обновляю страницу, мой код Js:

var timeleft =5400;

var startTime = 0;
var currentTime = 0;

function convertSeconds(s) {
    var decimal = (s/3600) - Math.floor((s/3600))
    var h = floor(s/3600);
    var min = floor(decimal * 60) ;
    var sec = s % 60;
    return nf(h, 2) + ':' + nf(min, 2) + ':' + nf(sec, 2);
}

function setup() {
    noCanvas();
    startTime = millis();

    var timer = select('#timer');
    timer.html(convertSeconds(timeleft - currentTime));

    var interval = setInterval(timeIt, 1000);

    function timeIt() {
        currentTime = floor((millis() - startTime) / 1000);
        timer.html(convertSeconds(timeleft - currentTime));
        if (currentTime == timeleft) {
            clearInterval(interval);
        }
    }
}

Мой HTML-код:

<html>
<head>
    <meta charset="UTF-8">
    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
    <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.js"></script>
    <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.js"></script>
    <script language="javascript" type="text/javascript" src="chrono.js"></script>
</head>
<body>
    <p id="timer"></p>
</body>
</html>

1 Ответ

0 голосов
/ 02 сентября 2018

Вы можете сохранить текущее значение счетчика в локальном хранилище (cookie или другие опции, если используете html 5) и при загрузке страницы прочитать его значение и запустить таймер на основании этого.

Эндрю предложил сохранять временную метку каждый раз, когда начинается интервал хранения. Затем при загрузке вы получаете дельту, вычитая текущую временную метку из сохраненной временной метки

...