javascript – How is the process done by detecting all the data on the page using jQuery?

exception or error:

I want to make a progress bar that counts forward with the specified start date and end date line. I can perform the operation I want with the code I wrote. But since there is a lot of code, there is confusion.

I want to follow a more logical way. My current codes are listed below.

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);
    }
}

Desired Method/Result:

I want it to automatically detect and count in real time all the elements that are set as follows.

I need jQuery (Javascript) codes to detect these HTML codes.

<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>
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *