如何让 setInterval 函数工作？答案

【问题标题】：How to get the setInterval function working?如何让 setInterval 函数工作？
【发布时间】：2020-08-31 05:56:29
【问题描述】：

对于我的学校项目，我试图显示一个实时刷新小时/分钟/秒的时钟。我想使用 SetInterval 还是错误的想法？谁能帮帮我？

        <h1 id="dag">Uw Dag</h1>
        <h2 id='full'>a</h2>
        <h3 id='tijd'>tijd</h3>


function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

function headerDag() {
    var d = new Date();
    var weekdays = ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"];
    var weekday = weekdays[d.getDay()];
    return weekday;
}

function getActualFullDate() {
    setInterval(getActualFullDate, 3000);
    var months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"];
    var d = new Date();
    var day = addZero(d.getDate());
    var month = months[d.getMonth()];
    var year = addZero(d.getFullYear());
    var h = addZero(d.getHours());
    var m = addZero(d.getMinutes());
    var s = addZero(d.getSeconds());
    return day + "  " + month + "  " + year + " " + h + ":" + m + ":" + s;

}


$(document).ready(function() {

    $("#full").html(getActualFullDate());
    $("#dag").html(headerDag());


});

【问题讨论】：

我们当然可以帮助您，但您需要描述实际问题是什么。鉴于您的 JS 代码中没有 setInterval()，因此标题令人困惑......
也许这行得通？

标签： javascript jquery time setinterval clock

【解决方案1】：

给你！基本上，我认为您无意中添加了递归。当您运行 sn-p 时，请参阅下面我所做的更改。

function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

function headerDag() {
    var d = new Date();
    var weekdays = ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"];
    var weekday = weekdays[d.getDay()];
    return weekday;
}

function getActualFullDate() {
      var months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"];
      var d = new Date();
      var day = addZero(d.getDate());
      var month = months[d.getMonth()];
      var year = addZero(d.getFullYear());
      var h = addZero(d.getHours());
      var m = addZero(d.getMinutes());
      var s = addZero(d.getSeconds());
      let full = day + "  " + month + "  " + year + " " + h + ":" + m + ":" + s;
      $("#full").html(full);
}


$(document).ready(function() {
    getActualFullDate();
    setInterval(function() {
      getActualFullDate();
    }, 3000);
    
    $("#dag").html(headerDag());


});

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <h1 id="dag">Uw Dag</h1>
  <h2 id='full'>a</h2>
  <h3 id='tijd'>tijd</h3>
</body>
</html>

【讨论】：

这成功了！非常感谢！

【解决方案2】：

getActualFullDate() 不会更新 HTML，它只是返回一个字符串。区间函数需要调用.html()。

function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

function headerDag() {
    var d = new Date();
    var weekdays = ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"];
    var weekday = weekdays[d.getDay()];
    return weekday;
}

function getActualFullDate() {
    var months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"];
    var d = new Date();
    var day = addZero(d.getDate());
    var month = months[d.getMonth()];
    var year = addZero(d.getFullYear());
    var h = addZero(d.getHours());
    var m = addZero(d.getMinutes());
    var s = addZero(d.getSeconds());
    return day + "  " + month + "  " + year + " " + h + ":" + m + ":" + s;

}

$(document).ready(function() {
    setInterval(function () {
        $("#full").html(getActualFullDate());
        $("#dag").html(headerDag());
    }, 3000);
});

【讨论】：