Авто остановка таймера на паузу

Question

Есть таймер с куки (запоминает значение) идет без остановок. Хочу сделать так, чтобы он становился на паузу через 1 час и начинал с того же значения после нажатия на кнопку.

Гугл не помог. Вот что пока получилось.

Прошу поделиться вашим вариантом, или помочь написать свой.

<html>
  <head>
    <title>timer</title>
    <meta charset=utf-8>
  </head>
  <body>
  <script type="text/javascript">let initialValue = 0.50000096

let multiplier = 0.00000001 

let getCookie = (c_name) => {
    let i, x, y, ARRcookies = document.cookie.split(";")

    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="))
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1)
        x = x.replace(/^\s+|\s+$/g, "")
        if (x == c_name) {
            return unescape(y)
        }
    }
}

let setCookie = (c_name, value, exdays) => {
    let exdate = new Date()
    exdate.setDate(exdate.getDate() + exdays)
    let c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString())
    document.cookie = c_name + "=" + c_value
}

let lastUpdated = getCookie('lastUpdated') * 1

if (!lastUpdated) {
    lastUpdated = Date.now()
    setCookie('lastUpdated', lastUpdated, 9999)
}

let diff = (Date.now() - lastUpdated) / 1000

let cu = (diff * multiplier) + initialValue

let doCu = () => {
    document.getElementById('cu').innerHTML = cu.toFixed(8)
    cu = cu + multiplier
}

document.write("<div id='cu' style='text-align: center; font-size: 40pt'></div>\n")

setInterval(doCu, 1000)
doCu()
</script>
  </body>
</html> ```

Answer 1

В сниппете куки не работают.
Для теста необходимо запустить код у себя.
Переписал чуть код и добавил комментариев для понимания принципа работы.

let initialValue = 0.50000096;
let multiplier = 0.00000001;
let TimeToWait = 3600; //час - 3600 секунд

Olesya.onclick = function(){ // При нажатии на кнопку
    let tttime = Date.now(); // Получаем текущее время
    setCookie('lastUpdated', tttime, 9999); // Перезаписываем куки при помощи функции
};

let getCookie = (c_name) => {
    let i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
};

let setCookie = (c_name, value, exdays) => {
    let exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    let c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
};

let lastUpdated = getCookie('lastUpdated') * 1;
if (!lastUpdated) {
    lastUpdated = Date.now();
    setCookie('lastUpdated', lastUpdated, 9999);
}
let diff = (Date.now() - lastUpdated) / 1000;

function checkTime() { // Вводим функцию получаения разницы в секундах
    lastUpdated = getCookie('lastUpdated'); // Значение в куки.
    let diff1 = (Date.now() - lastUpdated) / 1000; // Разница
    return diff1; // Возвращаем значение из функции
}

let cu = (diff * multiplier) + initialValue;

let diff2;
setInterval(function () { // Вводим интервал для запуска каждую секунду всего что внутри.
    diff2 = checkTime(); // Получаем значение из checkTime
    if(diff2 < TimeToWait){ // Если разница меньше установленного нами времени (час - 3600 секунд)
        doCu(); // Если меньше, то запускаем скрипт.
    }
}, 1000);

function doCu(){
    if(getCookie('Cu')){
        cu = +getCookie('Cu');
    }
    document.getElementById('cu').innerHTML = cu.toFixed(8);
    cu = cu + multiplier;
    document.cookie = "Cu=" + cu;
}
document.write("<div id='cu' style='text-align: center; font-size: 40pt'></div>\n");

<html>
<head>
    <title>timer</title>
    <meta charset=utf-8>
</head>
<body>
<button id="Olesya">Продолжить</button>

</body>
</html>

БЛОГ НА HUSL

Авто остановка таймера на паузу

Ответы (1 шт):