如何使用 django 和 javascript 制作动态倒数计时器？

【问题标题】：How to make a dynamic countdown timer using django and javascript?如何使用 django 和 javascript 制作动态倒数计时器？
【发布时间】：2020-08-25 21:12:37
【问题描述】：

从views.py 我将日期和时间返回到我的HTML 页面。但无法使用该日期和时间使用 Javascript 设置倒数计时器例如

return render(request,'page.html',{'date':i.date,'time':i.time,'hours':i.hours})

time 表示开始时间小时代表总倒计时时间 'i' 是 python 对象

【问题讨论】：

写出更好问题的一些建议：这有几个部分。您需要展示您已经完成的工作，并更具体地说明您需要帮助的内容。例如，您是否需要帮助弄清楚如何计算现在与设置的闹钟之间的时间差？还是以正确的格式将时间传递给 JS？还是创建一个计时器？

标签： javascript html css django web

【解决方案1】：

你可以使用这样的东西。我是从 w3schools 那里得到的。

var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
                            // date and time to end above

var x = setInterval(function() {


  var now = new Date().getTime();


  var distance = countDownDate - now;


  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);


  document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s ";


  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}

&lt;p id="demo"&gt;&lt;/p&gt;

【讨论】：