javascript - 使用 jQuery 检测页面上的所有数据是如何完成的？

Question

我想制作一个进度条，以指定的开始日期和结束日期行向前计数。我可以用我写的代码执行我想要的操作。但由于代码较多，所以比较困惑。

我想遵循一种更符合逻辑的方式。下面列出了我当前的代码。

我的 HTML:

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

我的 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，脚本就会自动检测它们并显示进度条。

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>