Question

我正在创建一个Web应用程序。在页面加载时，例程开始，“循环”通过每个锻炼（不使用按键或点击）。我正在使用setInterval向HTML添加不同的“锻炼”。我想用倒计时附加每个锻炼（让用户知道锻炼何时结束，下一个锻炼开始）。

（请注意，这些if / else语句稍后将重构为DRY）

这就是我所拥有的：

$(document).ready(function() {
    var counter = 470; //total length of routine in seconds
    var countDown = setInterval(function(){
      counter-- //decrease the counter each second
        if (counter === 470) {
            $(".routine").append("<p class='itemName'>Jumping Jacks!</p>");
        }
        else if (counter === 440) {
            $(".routine").empty().append("<p class='itemName'>Take a break!</p>");
        }
        else if (counter === 430) {
            $(".routine").empty().append("<p class='itemName'>Lounges!</p>");
        }
        else if (counter === 400) {
            $(".routine").empty().append("<p class='itemName'>Take a Break!</p>");
        }
        else if (counter === 390) {
            $(".routine").empty().append("<p class='itemName'>Sit Ups!</p>");
        }
        else if (counter === 360) {
            $(".routine").empty().append("<p class='itemName'>Take break!</p>");
        }
        else if (counter === 350) {
            $(".routine").empty().append("<p class='itemName'>Plank!</p>");
        }
        // will add additional workouts & breaks
        else if (counter === 0) {
            console.log("Finished!!");
            clearInterval(countDown);
          }
    }, 1000);

我尝试过：

This，但附加了span标记而不是硬编码
This
和this，还附加HTML而不是硬编码

Answer 1

不完全确定你在这里要求的是什么，但我修复了你的代码中的一些小错误，并为每个练习添加了一个“倒计时”时钟，它会减少下一个休息时间的秒数。 JS小提琴：http://jsfiddle.net/jouef2bx/

touchstart

既然你说要在工作之后干掉代码，我就把原来的算法留下来了，但是用一些分解和抽象来编写和调试真的会更简单。祝你好运。

Answer 2

您可以简单地跟随，因此您不必编写大量代码。

$(document).ready(function() {
      var counter = 470; //total length of routine in seconds
      var countDown = setInterval(function() {

        if (counter === 470) {
          setText("Jumping Jacks")
        } else if (counter === 440) {
          setText("Take a break");
        } else if (counter === 430) {
          setText("Lounges");
        } else if (counter === 400) {
          setText("Take a Break");
        } else if (counter === 390) {
          setText("Sit Ups");
        } else if (counter === 360) {
          setText("Take break");
        } else if (counter === 350) {
          setText("Plank");
        }
        // will add additional workouts & breaks
        else if (counter === 0) {
          console.log("Finished!!");
          clearInterval(countDown);
        }
        counter-- //decrease the counter each second
      }, 1000);
});

function setText(message) {
  return $("#routine").append("<p class='itemName'>" + message + "!</p>");
}

如何附加追加后初始化的倒计时？

2 个答案: