倒计时器与动作

I am trying to program an auction portal. But I've failed to implement a countdown timer in JavaScript.

Specifically, I have stored four different values in a MySQL database for each auction, which I can use for the calculation:

Start date (YYYY/MM/DD) - (MySQL-Attribut: atr_tenders_startdate)
Start time (H:M) - (MySQL-Attribut: atr_tenders_starttime)
End date (YYYY/MM/DD) - (MySQL-Attribut: atr_tenders_enddate)
End time (H:M) - (MySQL-Attribut: atr_tenders_endtime)

All auctions are listed in a HTML table using PHP MySQL Query:

<?php 
$sql = $pdo->query('SELECT * FROM tbl_tenders.......LEFT JOIN etc.');
foreach ($sql as $row)  
{ 

echo "<tr>";
echo "<td></td>";
echo"<td><div class=\"btn-group\">
<button type=\"button\" class=\"btn btn-info waves-effect\" onclick=\"window.location.href='bids.php?atr_tenders_id=".$row["atr_tenders_id"]."'\"> Bid</button>
</div></td>";
echo "</tr>";

}
?>

Now I want to display the remaining time (XX days XX {hours}: XX {minutes}:XX {seconds}) in a column for each auction, which counts down every second.

The countdown timer should deactivate the bid button after the countdown has expired and change the text to "Expired" so that nobody can bid anymore.

For the countdown timer I use the following script, which expects the four mentioned values from an input field. But these values are already retrieved in the PHP query:

<script type="text/javascript">
        function append(dl, dtTxt, ddTxt) {
          var dt = document.createElement("dt");
          var dd = document.createElement("dd");
          dt.textContent = dtTxt;
          dd.textContent = ddTxt;
          dl.appendChild(dt);
          dl.appendChild(dd);
        }

        $(document).ready(function() {

          var today = new Date();
          $('#d1').val(today.getFullYear() + "-" + ('0' + (today.getMonth() + 1)).slice(-2) + "-" + ('0' + (today.getDate() + 1)).slice(-2));
          $('#d2').val($('#d1').val());
          $('#t1').val('00:00');
          $('#t2').val('00:00');
          //
          //$('#d1 #d2 #t1 #t2').
          $('#d1, #d2, #t1, #t2').on('change', function(ev) {
            var dl = document.getElementById("diff");
            while (dl.hasChildNodes()) {
              dl.removeChild(dl.lastChild);
            }

            var date1 = new Date($('#d1').val() + " " + $('#t1').val()).getTime();
            var date2 = new Date($('#d2').val() + " " + $('#t2').val()).getTime();
            var msec = date2 - date1;
            var mins = Math.floor(msec / 60000);
            var hrs = Math.floor(mins / 60);
            var days = Math.floor(hrs / 24);
            var yrs = Math.floor(days / 365);
            var sec = Math.floor(hrs / 3600);
            mins = mins % 60;
            hrs = hrs % 24;
            append(dl, "In Tagen: ", days + " Tage, " + hrs + " Stunden, " + mins + " Minuten" + sec + " Sekunden");
          });
        });
    </script>

How can I now pass these four values to JavaScript so that the script calculates the remaining time for each auction individually? Can anyone help me understand the code?

To pass information in your JS, you should not inject the values into JS directly. You JS should be independent from your Backend logic

So you either...

1. Call an API to retrieve all information (including expiration date) and build the contents dynamically. I recommend to use a framework like Vue, angular, jQuery etc.

... or ...

2. You inject the contents into your HTML. For each, row, button or what ever you want to deactivate, you could add a data-expiration-date="..." Attribute.

Of course you need to read the information, throw it into your function, format it, print it somewhere, trigger events to ensure disabled behavior and so on and so on...

Your next task is to ensure, that each data set (from API or attribute) is handled individually and ensure correct behavior.

You JS code only generates a text, and injects a little bit of HTML. You need to translate this function, into a helper function, so can scale accordingly.