猿问

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

我有引导多步骤表格。每一步都有 <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);

        });


人到中年有点甜
浏览 110回答 2
2回答

慕丝7291255

document.getElementById('timer')总是返回在 DOM 中找到的第一个项目!您应该使用不同的 id ( #timer-1,#timer-2等) 并在您完成每个步骤时有条件地选择它们。您可以startCountdown像这样扩充您的方法:function startCountDown (selectorId, seconds) {&nbsp; var counter = seconds;&nbsp; var interval = setInterval(() => {&nbsp; &nbsp;document.getElementById(selectorId).innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp; counter--;&nbsp; &nbsp; if(counter < 0 ){&nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; };&nbsp; }, 1000);};let idCounter = 0$("#nextStep").click(function() {&nbsp; &nbsp;// generate new counter id based on your progression&nbsp; &nbsp;// this assumes your ids are timer-0, timer-1, etc&nbsp; &nbsp;startCountdown(60, 'timer-' + idCounter);&nbsp; &nbsp;idCounter++});更好的方法是使用类,getElementsByClassName()然后简单地遍历数组:function startCountDown (selectorId, timerCounter, seconds) {&nbsp; var counter = seconds;&nbsp; var interval = setInterval(() => {&nbsp; &nbsp;// getElementsByClassName returns a DOMNodeList of matched items that you can use indexes to access&nbsp; &nbsp;document.getElementByClassName(selectorId)[timerCounter].innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp; counter--;&nbsp; &nbsp; if(counter < 0 ){&nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; };&nbsp; }, 1000);};let timerCounter = 0$("#nextStep").click(function() {&nbsp; &nbsp;startCountdown(60, 'timer', timerCounter);&nbsp; &nbsp;timerCounter++});

慕沐林林

您需要更改 <span class="timer"></span>为 <span id="timer"></span>. 最后 };in 给我一个错误,所以我用var counter = seconds;&nbsp; var interval = setInterval(() => {&nbsp; &nbsp;document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp; counter--;&nbsp; &nbsp; if(counter < 0 ){&nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; };&nbsp; }, 1000);代替var counter = seconds;&nbsp; var interval = setInterval(() => {&nbsp; &nbsp;document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp; counter--;&nbsp; &nbsp; if(counter < 0 ){&nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; };&nbsp; }, 1000);};你可以做var counter = seconds;function startInterval() {&nbsp; &nbsp;var interval = setInterval(() => {&nbsp; &nbsp;document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp;counter--;&nbsp; &nbsp;if(counter < 0 ){&nbsp; &nbsp; &nbsp;clearInterval(interval);&nbsp; &nbsp;};&nbsp; }, 1000);}并用于 startInterval()启动计时器。如果你需要在计时器秒数结束时做某事,你可以做var counter = seconds;function startInterval() {&nbsp; &nbsp;var interval = setInterval(() => {&nbsp; &nbsp;document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp;counter--;&nbsp; &nbsp;if(counter < 0 ){&nbsp; &nbsp; &nbsp;clearInterval(interval);&nbsp; &nbsp; &nbsp;var timerOver = true;&nbsp; &nbsp;};&nbsp; }, 1000);};
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答