Question

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

具体来说，对于每次拍卖，我已经在MySQL数据库中存储了四个不同的值，这些值可用于计算：

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

所有拍卖都使用PHP MySQL查询在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应该独立于后端逻辑

所以你要么...

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

...或...

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

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

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

您的JS代码仅生成文本，并注入一点HTML。您需要将此函数转换为辅助函数，以便可以相应地缩放。

倒数计时器及动作

1 个答案: