进度栏未重置

Question

我正在进度条上。 这是一个计时器，但是当我单击按钮/框结果重新开始时，进度条将显示但不会重置。

它不会像第一次一样从100开始并自行变为0。 有什么想法吗？ 我已经检查过是否重置了所有变量！

 $("document").ready(function(){
  var number = 0;
  $("#cat").on("click", function(){
    var y = Math.random()*900;
    var d = Math.random()*300;
    var w = Math.random()*300;
    if (w < 100) {
    $("#cat").css({left: y, top: d, width: "60px", height: "70px"});
    }
    if (w > 100) {
      $("#cat").css({left: y, top: d, width: "170px", height: "190px"});
    }
    number++;
  });

  var i = 100;
  var counterBack = setInterval(function(){
   i --;
   if(i > 0){
    document.getElementById("timer").style.width = i+"%";
   }
   if (i < 25) {
    $("#question").fadeOut(300, "swing");
   }
   if (i === 0) {
    clearTimeout(counterBack);
    $("#cat").fadeOut(700);
    $("#progressbar").fadeOut(700);

    if (number < 25){
      $("body").append("<button id='box'><h3 id='sorry'>Oops! Sorry! Cats caught: <span id='yep'>"+number+"</span></h3></button>");
      $("#box").delay(700).fadeIn(100);
      $("#box").click(function(){
        $(this).hide();
        var number = 0;
        $("#cat").css({"height": "300px", "width": "290px", "margin-top": "80px", "margin-left":"300px", "position":"absolute", "float": "center"});
        $("#cat").fadeIn();
        $("#progressbar").fadeIn();
        var i = 100;
        setInterval(counterBack);
      }); 
    }
    else if (number >= 25){
      $("body").append("<div id='box'><h3 id='hurray'>Yay! You did it! Cats caught: <span id='yep'>"+number+"</span></h3></div>");
      $("#box").delay(700).fadeIn(100);
    }
  } 
 }, 200);

});

的HTML

 <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Bowlby+One+SC" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Bowlby+One" />

<body>

  <div id="content">
    <img id="cat" src="http://backgroundidea.info/wp-content/uploads/2015/03/black-and-white-cat-background-tumblr-black-cat-stock-i-by-anothersunrise-on-deviantart-beautiful.png"/>
    <h3></h3>
  </div>

  <div class="progress" id="progressbar">
  <div id="timer" class="progress-bar progress-danger active" role="progressbar"aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><h1 id="question">Can you catch 25 cats?</h1>  </div>  

  </div> 
</body>

Answer 1

您有几个问题：

在.box按钮中，您需要设置全局变量i = 100而不是var i = 0; 因为最后一个将创建一个局部变量，与number相同。
为了重置您的计时器（ setInerval ），您需要给您的计时器函数起一个名字。
您需要在计时器函数外部添加/附加.box div，然后使用.html()更改内容。 因为在每个间隔重置时，您都需要检查.box存在！
将单击处理程序附加到计时器功能之外，因为在每个间隔重置时，您都将重新附加单击处理程序，因此会产生奇怪的行为。

您的代码已改成https://jsfiddle.net/iRbouh/yfpmxcuk/ 。

进度栏未重置

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-31 15:44:18

进度栏未重置

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-31 15:44:18

解决方案1
0 已采纳 2016-07-31 15:44:18