Question

我是javascript和jquery的新手，所以，作为一个挑战，我正在做一些小游戏并且今天遇到了问题。

所以，代码的作用如下：出现了一些文字，过了一段时间后它需要fadeOut，但它只是为了我赢得了fadeOut ...

这是我的代码：

var timeToStart = 3;      
var timer = 0;

function count() {            
    document.getElementById("gameStarter").innerHTML = timeToStart + " s";      
    timeToStart = timeToStart - 1;            
} 

$("#start").click(function() {            
    $("#gameStart").fadeIn(500, function() {        
        timer = setInterval(count, 1000);                
        setTimeout(function() {clearInterval(timer);}, 4000);       
        if (timeToStart == 0) {      
            $("#gameStart").fadeOut(500)            
        }                       
    });
});

Answer 1

（gcampbell和Patrick Evans在评论中指出了这一点。由于他们没有发布答案，我会发布CW。）

您的代码

timer = setInterval(count, 1000);

setTimeout(function() {clearInterval(timer);}, 4000);

if (timeToStart == 0) {

  $("#gameStart").fadeOut(500)

}

在完成所有操作之前，

只运行一次if语句。现在它传递一次，当timeToStart仍然等于3.我建议将你的if语句放在你的count（）函数中，如下所示

function count() {

  document.getElementById("gameStarter").innerHTML = timeToStart + " s";

  timeToStart = timeToStart - 1;

  if (timeToStart == 0) {

    $("#gameStart").fadeOut(500)

  }

}

因此每次运行时都会检查它，而不是仅运行一次。

直播示例：

$("#gameStart").hide();

var timeToStart = 3;

var timer = 0;

function count() {

  document.getElementById("gameStarter").innerHTML = timeToStart + " s";

  timeToStart = timeToStart - 1;

    if (timeToStart == 0) {

      $("#gameStart").fadeOut(500)

    }
}

$("#start").click(function() {

  $("#gameStart").fadeIn(500, function() {

    timer = setInterval(count, 1000);

    setTimeout(function() {
      clearInterval(timer);
    }, 4000);

  });

});

<div id="gameStarter"></div>
<div id="gameStart">This is gamestart</div>
<input type="button" id="start" value="Start">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

javascript，jquery。赢得了fadeOut

1 个答案: