Как происходит процесс, обнаруживая все данные на странице, используя jQuery?

Question

Я хочу создать индикатор выполнения, который будет отсчитывать вперед с указанием даты начала и окончания строки. Я могу выполнить операцию, которую я хочу, с кодом, который я написал. Но так как кода много, возникает путаница.

Я хочу следовать более логичным путем. Мои текущие коды перечислены ниже.

MY HTML:

<div id="div1"></div>
<div id="div2"></div> 

MY jQuery + PHP:

progressBar(<?php echo strtotime("2020-02-20 10:00:00"); ?>, <?php echo strtotime("2020-02-20 15:00:00"); ?>, <?php echo time(); ?>, '#div1');
progressBar(<?php echo strtotime("2020-02-20 04:00:00"); ?>, <?php echo strtotime("2020-02-20 09:00:00"); ?>, <?php echo time(); ?>, '#div2');


/** Start Time, Stop Time, Now Time, Element Id **/
function progressBar(start, stop, now, element) {
    now++
    var timepast = now - start;
    var duration = stop - start;
    var percent  = ( 100 - ( timepast / duration ) *100 ).toFixed(2);

    $(element).text(percent);

    var timer = setTimeout(function(){ 
        progressBar(start, stop, now);
    }, 1000);

    if( percent < 0){
        clearInterval(timer);
    }
}

Желаемый метод / результат:

Я хочу, чтобы он автоматически обнаруживал и подсчитывал в реальном времени все элементы, которые установлены следующим образом.

Мне нужны jQuery (Javascript) коды для обнаружения этих HTML кодов.

<div id="div1" data-start="2020-02-20 10:00:00" data-stop="2020-02-20 15:00:00"></div>
<div id="div2" data-start="2020-02-20 04:00:00" data-stop="2020-02-20 09:00:00"></div>

Answer 1

С помощью приведенного ниже кода вам нужно только создать свои div's и скрипт automatically detect их и отобразить progressbar.

function progressBar(start, stop, element) {

    var now = (new Date().getTime() / 1000);
    var timepast = now - start;
    var duration = stop - start;
    var percent  = ( 100 - ( timepast / duration ) *100 ).toFixed(2);

    $(element).text(percent);

    var timer = setTimeout(function(){
        progressBar(start, stop, element);
    }, 1000);

    if( percent < 0){
        clearInterval(timer);
    }
}

$('div[data-start][data-stop]').each( function( index, element ) {
  var start = $(element).attr( 'data-start' );
  var stop = $(element).attr( 'data-stop' );
  progressBar( start, stop, element );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div1" data-start="<?php echo strtotime("2020-02-20 10:00:00"); ?>" data-stop="<?php echo strtotime("2020-02-20 04:00:00"); ?>"></div>
<div id="div2" data-start="<?php echo strtotime("2020-02-20 04:00:00"); ?>" data-stop="<?php echo strtotime("2020-02-20 09:00:00"); ?>"></div>

Answer 2

Чтобы найти совпадающие дивы, используйте:

 $("[data-start]")

и, чтобы добавить начало / остановку данных, используйте

$(this).data("start")

jquery попытки ввести тип из .data (), так что этого должно быть достаточно, но вы можете добавить new Date(), чтобы быть уверенным

Обновив существующий код, добавьте:

$(function() {
    $("[data-start")].each(function() { 
        progressBar(
            new Date($(this).data("start")), 
            new Date($(this).data("stop")), 
            new Date(), 
            this);
    });
});