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;，因为这最后会创建一个局部变量，{{1} }。
要重置计时器（number），您需要为计时器功能命名。
您需要在计时器功能之外添加/附加setInerval div，并使用.box更改内容。因为在每个间隔重置时，您需要检查.html()是否存在！
将点击处理程序附加到计时器功能之外，因为在每个间隔重置时，您将重新附加点击处理程序，因此会产生一种奇怪的行为。

您的代码已重组https://jsfiddle.net/iRbouh/yfpmxcuk/。

进度条未重置

1 个答案: