Question

我想建立一个小网站，在那里我可以显示不同时区的多个clocs。但是我遇到了setInterval函数的问题。

这是我的代码：

function addClock () {
  $("#container").append('<div class="dclock"></div>');
  setInterval(function () {
    var now = new Date();
    var h = now.getHours();
    var min = now.getMinutes();
    var s = now.getSeconds();

    $(".dclock:last").html(h + ":" + ( min < 10 ? "0" : "" ) + min + ":" + ( s < 10 ? "0" : "" ) + s);
  }, 1000);
}

我有一个按钮，每次单击时都会调用addClock函数。添加新时钟工作正常，但如果我添加第二个时钟，则第一个时钟会停止工作。

Answer 1

因为您使用最后一个选择器，所以他们选择相同的元素。引用您创建的元素，而不是使用选择器来选择它。

function addClock () {
  var div = $("<div class="dclock"></div>"); //new div
  $("#container").append(div);  //add the new div
  setInterval(function () {
    var now = new Date();
    var h = now.getHours();
    var min = now.getMinutes();
    var s = now.getSeconds();

    div.html(h + ":" + ( min < 10 ? "0" : "" ) + min + ":" + ( s < 10 ? "0" : "" ) + s);  //update the html of the div
  }, 1000);
}

多个新创建的div上的setInterval

1 个答案: