Question

嗨，我正在尝试创建一个小型健身应用。该应用程序显示一个练习和一个计数器。我想使计数达到指定的数字（20），然后使循环继续进行，并在数组中显示下一个练习，然后将计数重置为0。我希望重复此操作，直到完成所有练习。数组已显示。

我也非常感谢有人告诉我这出了什么问题。

链接：https://codepen.io/jtog95/pen/zYrMpPB

var increasing = true;
var excercises = document.getElementById('exercises');
var counter = document.getElementById('counter');
var count = 0;
var specifiedNum = 20;
var exerciseList = ['Push-ups', 'Pulls-ups', 'Squats', 'Curls'];


var fnLoop = setInterval(exerciseLoop, 20000);


function exerciseLoop(){
    for(var i = 0; i < exerciseList.length; i++){
        exerciseList[i] = excercises.innerHTML;
        increasing === true ? count++ : count = 0;
        count = counter.innerHTML;
        if(count === specifiedNum) {
            count = 0;
            exerciseList[i] += 1;
            clearInterval(fnLoop);
        }
    }
}

    <div class="counter-container">
        <div id= 'counter' class="counter">0</div>   
    </div>

    <div class="exercisecontainer">
        <div class="currentexercise">Current Exercise: </div>
        <div id= 'exercises' class="exercises">Push-Ups</div>
    </div>

    <div class="buttoncontainer">
    <button id='start' class='start button'>Start</button>
    <button id='stop' class='stop button'>Stop</button>
    </div>

Answer 1

我在下面对您的代码进行了一些更改。只是一些建议：

您已颠倒了代码中=关联的顺序；

var a = "foo";
var b = "bar";
a = b;
//Now a and b are both "bar"

您不需要for循环，也不需要定时递增计数器
4次循环后，数组中的项目用完了。使用count%exerciseList.length意味着到达count == 4时，您将跳回到数组的第一个元素
添加了第二个计数器exerciseCount，但没有第二个间隔
删除了行exerciseList[count] += 1;。我不确定您要在那做什么。
正在加载dom元素：document.getElementById仅在元素已经加载的情况下返回，否则将返回未定义。为避免这种情况，请将脚本放在页面末尾或将所有内容放在document.onload = function(){myScript}

更正的代码：

var increasing = true;
var excercises = document.getElementById('exercises');
var counter = document.getElementById('counter');
var count = 0;
var exerciseCount = 0;
var specifiedNum = 20;
var exerciseList = ['Push-ups', 'Pulls-ups', 'Squats', 'Curls'];


var fnLoop = setInterval(exerciseLoop, 1000);


function exerciseLoop(){
        increasing === true ? count++ : count = 0;
        counter.innerHTML = count;
        if(count === specifiedNum) {
            count = 0;
            counter.innerHTML = count;
            exerciseCount++
            excercises.innerHTML = exerciseList[exerciseCount%exerciseList.length];
        }
}

Answer 2

除了遍历练习之外，还向HTML添加了点击处理程序。还添加了在适当事件上禁用/启用“开始”按钮的功能。

var excercises = document.getElementById("exercises");
var counter = document.getElementById("counter");
var startBtn = document.getElementById("start");
var count = 0;
var timeLimit = 20;
var exerciseList = ["Push-Ups", "Pulls-Ups", "Squats", "Curls"];
var exerciseIdx = 0;


function exerciseLoop() {
  startBtn.disabled = true;
  function iterateTimeAndExercise() {
    exercises.innerHTML = exerciseList[exerciseIdx];
    currInt = setInterval(updateTimeAndExercise, 1000);
    function updateTimeAndExercise() {
      if (count === timeLimit) {
        exerciseIdx++;
        count = 0;
        clearInterval(currInt);
        if (exerciseIdx === exerciseList.length) {
           exerciseIdx = 0;
           counter.innerHTML = count;
           exercises.innerHTML = exerciseList[exerciseIdx];
           startBtn.disabled = false;
           return;
         }
        iterateTimeAndExercise();
      } else {
          count++;
          counter.innerHTML = count;
      }
    }
  }
  iterateTimeAndExercise();
}

function stop() {
  clearInterval(currInt);
  startBtn.disabled = false;
}

<body>

<main class="main">
    <div class="counter-container">
        <div id= 'counter' class="counter">0</div>   
    </div>

    <div class="exercisecontainer">
        <div class="currentexercise">Current Exercise: </div>
        <div id= 'exercises' class="exercises">Push-Ups</div>
    </div>

    <button onClick="exerciseLoop()" id='start' class='start button'>Start</button>
    <button id='stop' class='stop button' onClick="stop()">Stop</button>

</main>
    
    <script src="./script.js"></script>
</body>

Answer 3

您需要两个不同的时间间隔回调：

var increasing = true;
var excercises = document.getElementById('exercises');
var counter = document.getElementById('counter');
var ex = 0;
var count = 0;
var specifiedNum = 20;
var exerciseList = ['push-ups', 'pulls-ups', 'squats', 'curls'];

var fnCounter;

exerciseLoop();

function exerciseLoop(){
    exercises.innerHTML = exerciseList[count];
    if (ex < exerciseList.length - 1) {
      ex++;
      fnCounter = setInterval(incrementCounter, 1000)
    } else {
      ex = 0;
    }
  
    console.log(ex);
}

function incrementCounter() {
  if(count < specifiedNum) {
    console.log("increment", count);
    count++;
    counter.innerHTML = count.toString();
  } else {
    clearInterval(fnCounter);
    count = 0;
    exerciseLoop();
  }
}

通过遍历数组来更改innerHTML

3 个答案: