在当前活动元素中开始倒计时

Question

我有引导多步骤表格。每一步都有 <span class="timer"></span>。我的问题是计时器仅在第一步有效。我不知道如何在另一个步骤（字段集标记）上开始倒计时。定时器代码：  var counter = seconds;  var interval = setInterval(() => {   document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;    counter--;    if(counter < 0 ){      clearInterval(interval);    };  }, 1000);};我也试过这个：        $("#nextStep").click(function() {            startCountdown(60);        });

Answer 1

document.getElementById('timer')总是返回在 DOM 中找到的第一个项目！您应该使用不同的 id ( #timer-1,#timer-2等) 并在您完成每个步骤时有条件地选择它们。

您可以startCountdown像这样扩充您的方法：

function startCountDown (selectorId, seconds) {

  var counter = seconds;

  var interval = setInterval(() => {

   document.getElementById(selectorId).innerHTML = "("+counter + " seconds left)" ;

    counter--;

    if(counter < 0 ){

      clearInterval(interval);

    };

  }, 1000);

};

let idCounter = 0

$("#nextStep").click(function() {

   // generate new counter id based on your progression

   // this assumes your ids are timer-0, timer-1, etc

   startCountdown(60, 'timer-' + idCounter);

   idCounter++

});

更好的方法是使用类，getElementsByClassName()然后简单地遍历数组：

function startCountDown (selectorId, timerCounter, seconds) {

  var counter = seconds;

  var interval = setInterval(() => {

   // getElementsByClassName returns a DOMNodeList of matched items that you can use indexes to access

   document.getElementByClassName(selectorId)[timerCounter].innerHTML = "("+counter + " seconds left)" ;

    counter--;

    if(counter < 0 ){

      clearInterval(interval);

    };

  }, 1000);

};

let timerCounter = 0

$("#nextStep").click(function() {

   startCountdown(60, 'timer', timerCounter);

   timerCounter++

});

Answer 2

您需要更改 <span class="timer"></span>为 <span id="timer"></span>. 最后 };in 给我一个错误，所以我用

var counter = seconds;

  var interval = setInterval(() => {

   document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;

    counter--;

    if(counter < 0 ){

      clearInterval(interval);

    };

  }, 1000);

代替

var counter = seconds;

  var interval = setInterval(() => {

   document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;

    counter--;

    if(counter < 0 ){

      clearInterval(interval);

    };

  }, 1000);

};

你可以做

var counter = seconds;

function startInterval() {

   var interval = setInterval(() => {

   document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;

   counter--;

   if(counter < 0 ){

     clearInterval(interval);

   };

  }, 1000);

}

并用于 startInterval()启动计时器。如果你需要在计时器秒数结束时做某事，你可以做

var counter = seconds;

function startInterval() {

   var interval = setInterval(() => {

   document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;

   counter--;

   if(counter < 0 ){

     clearInterval(interval);

     var timerOver = true;

   };

  }, 1000);

};