Django python + javascript 倒计时 – Python 和 Javascript 的不同时间?

Django python + javascript countdown – different times in Python and Javascript?

编辑 #2

同样,我花了一些时间编写代码并进行了更多研究:

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

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

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

输出views.py

Timestamp: 2022-02-03 20:10:00

Timestamp.strftime('%s'): 1643919000

输出javscript

Date Thu Feb 03 2022 21:10:00 GMT+0100 (Central European Standard Time) 1643919000000

(毫秒)秒输出基本相同,但 Python 中的 datetime.datetime object 和 Javascript 中的 Date 对象不同。

这里有什么魔力?


编辑

经过一些重新调整(感谢评论中的 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);

我同时记录了 countDownDatenow。看起来他们使用不同的偏移量。 countDownDate,来自 python,似乎有 GMT+0000 的偏移量,而 now returns 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 个小时。

如果这太不专业而且只是对我的问题的粗略描述,请原谅。我将感谢社区的帮助,因为我正在努力变得更好并理解这里的所有这些基础流程。

非常感谢!

我刚刚解决了!!

这是我的 .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);

在此post的帮助下:add or subtract timezone difference to javascript Date

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

这现在可以正常工作了,我希望它独立于人们发现自己所在的时区。

当然,如果您对此有任何意见,请随时添加。