带有动作的倒数计时器答案

【问题标题】：Countdown timer with actions带有动作的倒数计时器
【发布时间】：2019-08-08 02:57:57
【问题描述】：

我正在尝试对拍卖门户进行编程。但我未能在 JavaScript 中实现倒数计时器。

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

开始日期 (YYYY/MM/DD) - (MySQL-Attribut: atr_tenders_startdate)
开始时间 (H:M) - (MySQL-属性: atr_tenders_starttime)
结束日期 (YYYY/MM/DD) - (MySQL-属性: 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，以便脚本单独计算每次拍卖的剩余时间？谁能帮我理解代码？

【问题讨论】：

标签： javascript php mysql countdowntimer

【解决方案1】：

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

所以你要么...

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

...或...

您将内容注入 HTML。对于每个、行、按钮或您想要停用的任何内容，您都可以添加一个 data-expiration-date="..." 属性。

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

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

你的 JS 代码只生成一个文本，并注入一点点 HTML。您需要将此函数转换为辅助函数，以便进行相应的扩展。

【讨论】：