Django python + javascript 倒计时——Python 和 Javascript 的不同时间？答案

【问题标题】：Django python + javascript countdown – different times in Python and Javascript?Django python + javascript 倒计时——Python 和 Javascript 的不同时间？
【发布时间】：2022-02-02 15:21:59
【问题描述】：

编辑#2

再次，我花了一些时间在代码上并进行了更多研究：

在我的 views.py 中，我执行以下操作

timestamp = datetime.combine(inst.date, inst.time).strftime('%s')

timestamp 通过模板传递给 javascript。但是无法解释的（对我来说）发生在views.py中

输出views.py

时间戳：2022-02-03 20:10:00

Timestamp.strftime('%s'): 1643919000

输出 javscript

2022 年 2 月 3 日星期四 21:10:00 GMT+0100（中欧标准时间） 1643919000000

（毫秒）输出基本相同，但 Python 中的 datetime.datetime object 和 Javascript 中的 Date 对象不同。

这里有什么魔法？

编辑

经过一些重新调整（感谢 cmets 中的 Kyvex），我将差距缩小到一小时。现在可以以某种方式解释：

这是现在的 .js 代码：

var countDownDate = JSON.parse(document.getElementById('timestamp').textContent); //new Date("Feb 2, 2022 22:59:00 GMT+0000").getTime(); 

var x = setInterval(function () {

    var now = new Date().getTime();
    console.log(countDownDate);
    const GMT = 3600000;
    console.log(now);
    var difference = countDownDate * 1000 - now - GMT;

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

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

    if (difference < 0) {
        clearInterval(x);
        document.getElementById("clock").innerHTML = "<h1>EXPIRED!</h1>";
    }

}, 1000);

我同时记录了countDownDate 和now。似乎他们使用不同的偏移量。 countDownDate，来自 python，似乎有一个 GMT+0000 的偏移量，而 now 返回一个 GMT+0100。我现在通过减去const GMT = 3600000 来硬编码这个差异。但这不能解决问题。

如何让它们同步？

我比较新，只是一个业余程序员。目前，我尝试在一个小型 Django 项目上工作，我想通过表单设置未来的日期和时间，并且在用户单击“提交”后，页面显示从现在到设置的日期和时间的倒计时。

在对 datetime 模块进行了一些试验后，我发现自己遇到了一个尴尬的问题。我在表单中有两个字段：1. 日期和 2. 时间使用timestamp = datetime.datetime.combine(date, time).strftime('%s')，我将这两个信息结合起来并获得秒输出。然后，我使用{{ timestamp|json_script:'timestamp'}} 将timestamp 传递给我的.js 文件。

这是我的 .HTML 代码：

<body>
  {% load static %}
  <html>
    <form method="post" enctype="multipart/form-data">
      {% csrf_token %} {{ form.as_p }}
      <button type="submit">Submit</button>
    </form>

    {% if inst %}

    <center><h3>Success</h3>
    <div id="clock"></div></center>

    {{ timestamp | json_script:'timestamp'}}

    <script src="{% static 'js/timer.js' %}"></script>
    {% endif %}
  </html>
</body>

如果我现在将setTime 设置为未来 2 分钟，我的倒计时显示为 4 小时，difference 为 3 小时。

我知道时区和 DST 存在差异，但从我所在的位置算起，加起来需要 3 或 4 个小时。

如果这太不专业并且只是对我的问题的简单描述，请原谅。感谢社区的帮助，因为我正在努力变得更好并了解所有这些基本流程。

非常感谢！

【问题讨论】：

你能发布你的timer()函数吗？
@Kyvex 我刚刚将整个函数粘贴到问题中。
您介意发布您的html 吗？我可以试一试代码，看看我能为你解决什么问题。
@Kyvex 当然。谢谢！
我会看看这个教程：Tutorial 看看他们是怎么做的。我有一个会议要参加，所以我不想让你久等。

标签： javascript python django timezone gettime

【解决方案1】：

我刚刚解决了！！

这是我的 .js 代码

var countDownDate = JSON.parse(document.getElementById('timestamp').textContent);

var newDate = new Date(countDownDate * 1000);

// Get NOW
var now = new Date();

// Get Timezone offset from imported date
var tzDifference = newDate.getTimezoneOffset();

// calculate the new offset time
var offsetNewTime = new Date(newDate.getTime() + tzDifference * 60 * 1000)

var x = setInterval(function () {

    var now = new Date();
    
    // console.log(now.getTime());
    var difference = offsetNewTime - now;

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

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

    if (difference < 0) {
        clearInterval(x);
        document.getElementById("clock").innerHTML = "<h1>EXPIRED!</h1>";
    }

}, 1000);

在这篇文章的帮助下：add or subtract timezone difference to javascript Date

不知何故，我从 python 和 javascript 得到了两个不同的时间偏移量。所以我使用getTimezoneOffset(); 来解决这个问题，并将这个偏移量添加到导入的日期时间中。

这只是现在有效，我希望它独立于人们发现自己所在的时区。

当然，如果您有任何 cmets，请随时添加。

【讨论】：