尝试为各种任务创建javascript输出循环

我正在尝试使用javascript创建带有计数器的任务。脚本将查找任务条目，然后根据数据库中的内容创建。例如-

任务1[计时器1]
任务2[计时器2]
任务3[计时器3]

目前我的输出是这样的

任务1[计时器3]
任务2[计时器3]
任务3[计时器3]

我的代码如下：

{% if tasks %}

    {% for task in tasks %}

        <button class="button";>Complete!</button><p style="display: inline-block;font-weight: bold; color: red;">{{ task.task_name }}
            </p>
        <p></p>
        <p id='{{ task.id }}'; style="text-align: right;padding-right: 60px"></p>
        <p> <script>
                var countDownDate = new DateTime('{{ task.task_due }}').getTime();

                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('{{ task.id }}').innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";

            if (distance < 0) {
            clearInterval(x);
            document.getElementById('{{ task.id }}').innerHTML = "EXPIRED";
            }
                }, 1000);
            </script>
        </p>
        <p></p>

{%if tasks%}
{tasks%%中任务的%s}
完成
{{{task.task_name}




var countDownDate=new DateTime（“{{task.task_due}}”）.getTime（）；
var x=setInterval（函数（）{
var now=new Date（）.getTime（）；
var距离=倒计时日期-现在；
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
document.getElementById（“{{task.id}}”）.innerHTML=days+“d”+hours+“h”
+分钟+米+秒+秒；
如果（距离<0）{
净间隔（x）；
document.getElementById（“{{task.id}}”）.innerHTML=“过期”；
}
}, 1000);

---

非常感谢您的帮助，谢谢您有几点需要指出：

在文档正文中设置所有这些

var

s意味着它们的作用域都是全局

window

对象，这意味着每个循环覆盖相同的变量这就是为什么在所有三个插槽中都会看到

timer3

的结果。

（小问题）HTML中的一些地方有多余的分号。HTML标记中不需要分号，除非它们位于接受分号的属性的引号内（例如

style=”“

属性）

（小问题）与引号一致。一个好的通用样式原则是，对于HTML属性，使用“双引号”，对于Javascript中的字符串，使用“单引号”

您正在为tasks循环中任务的

每次迭代创建重复的javascript代码。相反，您应该将该循环视为触发计时器开始并显示计时器结果的地方，但这不应该是所有计时器创建代码所在的地方

要修复（4），您需要从计时器创建代码中生成一个可重用的函数。这是一个很好的测试用例，可以考虑需要将哪些函数参数传递给计时器创建函数。在查看代码时，我看到您在创建计时器的代码中使用了

task.id

和

task.task\u due

。看起来我们只需要将这两个值传递给

createTimer（）

函数

试着这样做：

函数createTimer（taskId，taskDue）{
//只需为该计时器查找此元素一次
var timerelation=document.getElementById（taskId）；
var countDownDate=新的日期时间（taskDue）.getTime（）；
var timer=setInterval（函数（）{
var now=new Date（）.getTime（）；
var距离=倒计时日期-现在；
如果（距离<0）{
清除间隔（计时器）；
timerelation.innerHTML=“过期”；
}否则{
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
var timerDisplay=`${days}d${hours}h${minutes}m${seconds}s`；
timerelation.innerHTML=timerDisplay；
}
}, 1000);
}
{%if任务%}
{tasks%%中任务的%s}
完成

{{task.task_name}


createTimer（{{task.id}}，{{{task.task_due}}}）
{%endfor%}
{%endif%}

通常情况下，发生这种情况是因为您意外创建了一个闭包-请参见..这样复制代码不是一个好主意。这些变量将在

之间共享。这是一种享受，有助于我更好地理解这一切，非常感谢！