进度栏未重置

Question

I am working on a progress bar. 我正在进度条上。 It's a timer but somehow when I click on the button/box result to start over, the progress bar will show up but won't reset. 这是一个计时器，但是当我单击按钮/框结果重新开始时，进度条将显示但不会重置。

It won't start at 100 and get to 0 by itself like it does the first time. 它不会像第一次一样从100开始并自行变为0。 Any ideas why? 有什么想法吗？ I've already checked that I reset all variables! 我已经检查过是否重置了所有变量！

 $("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 的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

You have several problems: 您有几个问题：

In your .box button click you need to set the global variable i = 100 and not var i = 0; 在.box按钮中，您需要设置全局变量i = 100而不是var i = 0; because this last will create a local variable, the same for number . 因为最后一个将创建一个局部变量，与number相同。
In order to reset your timer ( setInerval ) you need to give a name to your timer function. 为了重置您的计时器（ setInerval ），您需要给您的计时器函数起一个名字。
You need to add/append .box div outside the timer function and use .html() to change the content. 您需要在计时器函数外部添加/附加.box div，然后使用.html()更改内容。 Because on every interval resets you need to check if the .box exists! 因为在每个间隔重置时，您都需要检查.box存在！
Attach the click handler outside the timer function because on each interval resets you will reattach the click handler, therefore, getting a weird behaviour. 将单击处理程序附加到计时器功能之外，因为在每个间隔重置时，您都将重新附加单击处理程序，因此会产生奇怪的行为。

Your code reformed https://jsfiddle.net/iRbouh/yfpmxcuk/ . 您的代码已改成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