JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>cyberforum / thread2267086</title>
        <script type="text/javascript" src="./script.js"></script>
    </head>
 
    <body>
        <div>
            <p>
                <span>Следующий запрос:</span>
                <span class="next-request">2018-06-23 23:41:59</span>
            </p>
 
            <p>
                <span>Осталось:</span>
                <span class="next-timer">...</span>
            </p>
        </div>
    </body>
</html>

JavaScript

'use strict';
 
window.addEventListener('load', InitTimer);
 
function InitTimer() {
    // Время следующего запроса
    const NextRequest = document.querySelector('.next-request');
 
    // Таймер до следующего запроса
    const NextTimer = document.querySelector('.next-timer');
 
    // Время инициализации
    const StartTime = new Date;
 
    // Объект времени для таймера
    const EndTime = new Date(NextRequest.innerText);
 
    // Запускаем до первого вызова Render из setInterval
    Render();
 
    // Запускаем интервал обновления
    var IntervalId = setInterval(Render, 0);
 
    // Ф-я рендеринга
    function Render() {
        // Скорее всего название переменной не подходит, но она содержит
        //     но она содержит остаточные секунды
        const left = (EndTime - new Date);
 
        if(left <= 0) {
            NextTimer.innerText = `Можно отправлять запрос! ;)`;
            return;
        }
 
        // Обновляем содержимое элемента
        NextTimer.innerText = CalcTimeDiff(left, true);
    }
}
 
// Возвращает строку вида: "5ч. 10м. 28с. 756мс."
function CalcTimeDiff(diffms, showms) {
    var W, D, h, m, s, ms = diffms;
 
    W = D = h = m = s = 0;
 
    ms -= (W = Math.floor(ms / 604800000)) * 604800000;
    ms -= (D = Math.floor(ms / 86400000)) * 86400000;
    ms -= (h = Math.floor(ms / 3600000)) * 3600000;
    ms -= (m = Math.floor(ms / 60000)) * 60000;
    ms -= (s = Math.floor(ms / 1000)) * 1000;
 
    var text = [];
    (!W && !text.length) || text.push(`${W}н.`);
    (!D && !text.length) || text.push(`${D}д.`);
    (!h && !text.length) || text.push(`${h}ч.`);
    (!m && !text.length) || text.push(`${m}м.`);
 
    if(!showms) {
        text.push(`${s}с.`);
    } else {
        (!s && !text.length) || text.push(`${s}с.`);
        text.push(`${ms}мс.`);
    }
 
    text = text.join(' ').trim();
 
    return text;
}