Odpočet graficky

by Petr Haluza

HTML

<div id="odpocet">
	
		<svg viewBox="0 0 42 42" class="donut">
    <circle id="c1" cx="21" cy="21" r="15.91549430918954" stroke-dasharray="100 0" stroke-dashoffset="100"></circle>
    <circle id="c2" cx="21" cy="21" r="15.91549430918954" stroke-dasharray="0 100" stroke-dashoffset="0"></circle>
    <g class="chart-text">
        <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" id="counterText"></text>
    </g>
</svg>

</div>

CSS

#odpocet { width: 30px; height: 30px; position: relative}
#odpocet svg { width: 100%; height: 100%; margin:10px; transform: rotate(-90deg)}
#c1 { stroke: #eee; stroke-width: 10px; stroke-linecap: round; fill: transparent}
#c2 { stroke: green; stroke-width: 10px; stroke-linecap: round; fill: transparent}
#odpocet:hover:after { content: "Tento termín vám garantujeme ještě " attr(data-timer) " min."; width:180px; display:block; position: absolute; background: #eee; padding: 10px; border-radius: 4px; text-align: center }

/**/
body { padding: 50px}

JavaScript

$(document).ready(function() {
    // Definovaný časový úsek (15 minut)
    var startTime = new Date();
    startTime.setHours(15);
    startTime.setMinutes(10);
    startTime.setSeconds(0);

    var endTime = new Date(startTime.getTime() + 15 * 60 * 1000); // Připočítání 15 minut

    function updateTimeline() {
        var now = new Date();
        var totalTime = (now - startTime) / 1000; // celkový čas v sekundách

        if (now >= endTime) {
            //$('#c1').attr('stroke-dasharray', '0 100');
            $('#c2').attr('stroke-dasharray', '100 0');
            clearInterval(interval);
        } else {
            var percentage = (totalTime / (15 * 60)) * 100; // procento dokončení
            var dashArrayValue = percentage + ' ' + (100 - percentage);
            //$('#c1').attr('stroke-dasharray', dashArrayValue);
            $('#c2').attr('stroke-dasharray', (100 - percentage) + ' ' + percentage);
						$('#odpocet').attr('data-timer', Math.trunc( ((15 * 60) - totalTime) / 60 + 1));
        }
    }

    var interval = setInterval(updateTimeline, 1000);
});