javascript - 如何多次调用javascript

Question

我有一个 js 脚本，可以倒计时获取 div 的数据属性。我的问题是我在同一页面中有很多 div，我希望看到每个 div 都有自己的倒计时。我尝试使用 for 循环来迭代每个标签，但是出了点问题。

var x = document.getElementsByClassName("countdown_ele");
var i;

for (i = 0; i < x.length; i++) {
  var seconds = x[i].dataset.timer;

  function timer() {
    var days = Math.floor(seconds / 24 / 3600);
    var hoursLeft = Math.floor((seconds) - (days * 86400));
    var hours = Math.floor(hoursLeft / 3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
    var minutes = Math.floor(minutesLeft / 60);
    var remainingSeconds = seconds % 60;

    function pad(n) {
      return (n < 10 ? "0" + n : n);
    }
    x[i].innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + +pad(remainingSeconds);
    if (seconds == 0) {
      clearInterval(countdownTimer);
      x[i].innerHTML = "Completed";
    } else {
      seconds--;
    }
  }
  var countdownTimer = setInterval('timer()', 1000);
}

<div class="countdown_ele" data-timer="30"></div>

标签： javascriptinvokemultiple-instances