Javascript中的倒计时在输入新数据后也显示旧数据

因此，我在这里用HTML和Javascript编写一个倒计时计时器。但我有一个问题。它看起来不会“忘记”旧的输入数据，在我单击“计算”按钮后，几乎同时显示旧的和新的数据

我的代码似乎可以工作，但问题是，当我输入一个新的日期时，它同时显示新旧计时器。例如，如果我输入2020年12月7日，它将显示1天（一些分和秒，无论什么），然后如果我在每秒钟内输入2020年12月8日，它将显示2天，然后突然变为1天，然后变为2天等。如果我输入另一个日期，它将快速显示所有三个计时器。我该如何解决这个问题？ 我认为旧的信息被留下了，我尝试添加一个语句来清除“res”部分，但它仍然是一样的。我不知道原因是什么

函数计算（）{
var til_date=新日期（document.getElementById（“input_date”）.value.getTime（）；
var x=setInterval（函数（）{
var today=new Date（）.getTime（）；
var d=截止日期-今天；
可变天数=数学下限（d/（1000*60*60*24））；
var hr=数学下限（（d%（1000*60*60*24））/（1000*60*60））；
最小值=数学地板（（d%（1000*60*60））/（1000*60））；
var sec=数学下限（（d%（1000*60））/1000）；
document.getElementById（“res”）.innerHTML=days+“d”+hr+“h”+min+“m”+sec+“s”；
if（d<0）{
净间隔（x）；
document.getElementById（“res”）.innerHTML=“完成”；
}
}, 1000);
}

请选择一个日期：

算计

只需将interval变量置于函数外部，并在循环外部再次调用函数时清除interval

否则，每次函数调用都将创建一个新的间隔，该间隔将与前一个间隔并行运行

var x;
function calculate() {
    clearInterval(x);
    var until_date = new Date(document.getElementById("input_date").value).getTime();
    x = setInterval(function () {
        var today = new Date().getTime();
        var d = until_date - today;
        var days = Math.floor(d / (1000 * 60 * 60 * 24));
        var hr = Math.floor((d % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var min = Math.floor((d % (1000 * 60 * 60)) / (1000 * 60));
        var sec = Math.floor((d % (1000 * 60)) / 1000);

        document.getElementById("res").innerHTML = days + "d " + hr + "h " + min + "m " + sec + "s ";

        if (d < 0) {
            clearInterval(x);
            document.getElementById("res").innerHTML = "DONE";
        }
    }, 1000);

}

varx；
函数计算（）{
净间隔（x）；
var til_date=新日期（document.getElementById（“input_date”）.value.getTime（）；
x=设置间隔（函数（）{
var today=new Date（）.getTime（）；
var d=截止日期-今天；
可变天数=数学下限（d/（1000*60*60*24））；
var hr=数学下限（（d%（1000*60*60*24））/（1000*60*60））；
最小值=数学地板（（d%（1000*60*60））/（1000*60））；
var sec=数学下限（（d%（1000*60））/1000）；
document.getElementById（“res”）.innerHTML=days+“d”+hr+“h”+min+“m”+sec+“s”；
if（d<0）{
净间隔（x）；
document.getElementById（“res”）.innerHTML=“完成”；
}
}, 1000);
}

如果我在函数的开头添加

clearInterval（x）

还是一样的：/多谢！真管用！我试着写

clearInterval（x）在开始时，但它当然不起作用。这是一个很好的解决方案，谢谢！：）