倒计时器与动作

Question

我正在尝试编制拍卖门户网站。但是我没能在JavaScript中实现倒数计时器。

具体来说，我在每次拍卖的MySQL数据库中存储了四个不同的值，我可以用它们进行计算：

开始日期（YYYY / MM / DD） - （MySQL-Attribut：atr_tenders_startdate） 开始时间（H：M） - （MySQL-Attribut：atr_tenders_starttime） 结束日期（YYYY / MM / DD） - （MySQL-Attribut：atr_tenders_enddate） 结束时间（H：M） - （MySQL-Attribut：atr_tenders_endtime）

所有拍卖都使用PHP MySQL Query列在HTML表中：

<?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>";

}
?>

现在，我想在每个拍卖的列中显示剩余时间（XX天XX {小时}：XX {分钟}：XX {秒}），每秒都会倒计时。

倒数计时器应在倒计时结束后停用出价按钮，并将文本更改为“已过期”，以便任何人都无法再出价。

对于倒数计时器，我使用以下脚本，该脚本需要输入字段中提到的四个值。但是这些值已在PHP查询中检索到：

<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>

我现在如何将这四个值传递给JavaScript，以便脚本单独计算每次拍卖的剩余时间？任何人都可以帮我理解代码吗？

Answer 1

要在JS中传递信息，不应直接将值注入JS。你JS应该独立于你的后端逻辑

所以你要么......

1. 调用API以检索所有信息（包括到期日期）并动态构建内容。我建议使用像Vue，angular，jQuery等框架。

... 要么 ...

2. 您将内容注入HTML。对于每个，行，按钮或您想要停用的内容，您可以添加data-expiration-date =“...”属性。

当然，您需要读取信息，将其放入您的函数，格式化，在某处打印，触发事件以确保禁用行为等等......

您的下一个任务是确保每个数据集（来自API或属性）单独处理并确保正确的行为。

你JS代码只生成一个文本，并注入一点点HTML。您需要将此函数转换为辅助函数，因此可以相应地进行缩放。