Javascript 倒计时js，继续重新启动

我正在学习，所以请善待我：-）

我找到了完美的倒计时钟。 我想实现的是，在

1

之后，单词

升空

come，但由于某种原因，倒计时时钟一直显示

1

var startNum;
var currentNum;

function addClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.addClass(c); }, to);
}

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0)  $('#countdown').html("Lift Off!"); else currentNum--;
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

$(function() {
  startNum = 5; 
  currentNum = startNum;
  $("#countdown").html(currentNum); // init first time based on n
  self.setInterval(function(){anim()},1325);

});

$（'#倒计时'）.html（currentNum+1）覆盖以前设置的任何内容

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0) {
      $('#countdown').html("Lift Off!");
      clearInterval(token)
  } else {
      currentNum--;
      $('#countdown').html(currentNum+1); // Only show if not "Lift Off!"
  }
  $('#countdown').removeClass("puffer");
}

var token;
$(function() {
  startNum = 5; 
  currentNum = startNum;
  $("#countdown").html(currentNum); // init first time based on n
  token = self.setInterval(function(){anim()},1325);
});

根据Tyler的建议添加了
clearInverval
，
$（“#倒计时”）.html（currentNum+1）覆盖以前设置的任何内容

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0) {
      $('#countdown').html("Lift Off!");
      clearInterval(token)
  } else {
      currentNum--;
      $('#countdown').html(currentNum+1); // Only show if not "Lift Off!"
  }
  $('#countdown').removeClass("puffer");
}

var token;
$(function() {
  startNum = 5; 
  currentNum = startNum;
  $("#countdown").html(currentNum); // init first time based on n
  token = self.setInterval(function(){anim()},1325);
});

根据Tyler的建议添加了
clearInverval
您的代码中有一个bug。你可以起飞了if
else
语句之后添加code>

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);

  // Add a return statement here.
  if (currentNum == 0) {
      $('#countdown').html("Lift Off!");
      return;
  }

  else {
     currentNum--;
  }
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

您的代码中有一个bug。你可以起飞了if

else

语句之后添加code>

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);

  // Add a return statement here.
  if (currentNum == 0) {
      $('#countdown').html("Lift Off!");
      return;
  }

  else {
     currentNum--;
  }
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

---

让我们看看你的动画功能：

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0)  $('#countdown').html("Lift Off!"); else currentNum--;
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

如果If语句后缺少大括号，则表示它们仅适用于以下语句（单数）。基于此，让我们在代码中隐含的部分周围添加大括号：

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0) {
    $('#countdown').html("Lift Off!");
  } else {
    currentNum--;
  }
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

基于此，当currentNum为0时，

#倒计时

的内容变为“起飞！”然后立即变为

currentNum+1

。这就是为什么它永远不会以“起飞”结束

此代码将打印“Lift Off！”或当前编号（在被引用后，该编号将递减）：

---

让我们看看你的动画功能：

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0)  $('#countdown').html("Lift Off!"); else currentNum--;
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

如果If语句后缺少大括号，则表示它们仅适用于以下语句（单数）。基于此，让我们在代码中隐含的部分周围添加大括号：

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0) {
    $('#countdown').html("Lift Off!");
  } else {
    currentNum--;
  }
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

基于此，当currentNum为0时，

#倒计时

的内容变为“起飞！”然后立即变为

currentNum+1

。这就是为什么它永远不会以“起飞”结束

此代码将打印“Lift Off！”或当前编号（在被引用后，该编号将递减）：

---

---

anim

功能在页面剩余时间内仍将每1.3秒运行一次。也许在间隔完成后清除间隔也是个好主意。@Wouter我添加了clearInterval。应该可以正常工作，但请注意我没有测试它…@Clint，我看到了，但是我如何让升空时间再长一点，可能再长2秒。@问题中是否缺少一些代码？我看不到任何东西会在间隔被清除后从页面中删除“Lift Off！”。@Clint哦，是的，你看不到我的css在它后面…#countdown.puffer{opacity:0；transform:scale（.6.6）；transition:all.4s ease in；}所以使用“Lift Off”它需要保持

anim

功能在页面的剩余生命周期中仍将每1.3秒运行一次。也许在间隔完成后清除间隔也是个好主意。@Wouter我添加了clearInterval。应该可以正常工作，但请注意我没有测试它…@Clint，我看到了，但是我如何让升空时间再长一点，可能再长2秒。@问题中是否缺少一些代码？我看不到任何东西会在间隔被清除后从页面中删除“Lift Off！”。@Clint哦，是的，你看不到我的css在它后面…#countdown.puffer{opacity:0；transform:scale（.6.6）；transition:all.4s ease in；}所以对于“Lift Off”，它需要在单独的回答中提到这一点，但我可以建议在完成后清理间隔吗。在页面生命周期的剩余时间里，如果函数再也不会做任何事情，那么每秒调用一次函数是没有用的。我选择这个作为答案，因为它详细地解释了我的错误。萨克斯·克里斯。还有一个问题，我应该把我的时间间隔放在哪里？“起飞后？是的，”泰勒罗珀，我看到了那句话，想：“嗯，这是个好主意”@你会不会在电梯起飞的时候把间隔清除一下；我已经更新了我的答案，以包含我在单独的答案中提到的内容，但我建议在完成后清除间隔。在页面生命周期的剩余时间里，如果函数再也不会做任何事情，那么每秒调用一次函数是没有用的。我选择这个作为答案，因为它详细地解释了我的错误。萨克斯·克里斯。还有一个问题，我应该把我的时间间隔放在哪里？起飞后？是的，@TylerRoper，我看到了那条评论，心想“嗯，这是个好主意”。@wower你能不能把间隔时间和起飞时间一起清理掉；我已经更新了我的答案，让它看起来像什么