javascript - 为什么游戏计时为 0、5、4、3、2、1，而不是 5、4、3、2、1 秒？

Question

当我完成第一轮后开始 Clickgame 时，秒数为 0,5,4,3,2,1，而不是 5,4,3,2,1。有谁知道代码中有什么错误以及需要更改什么？所以这就像 5 被算成双倍一样。

我想知道的另一件事是，如何添加一个功能(输入 HTML)来添加一个弹出窗口，用户可以在其中选择自己想要播放的秒数时间？

let klick = 0;
display = document.querySelector('#time');

$("#start").click(function() { //clickfunktion beim starten.
  $("#start").fadeOut(); //Der Startbutton geht weg
  $("#welcome").fadeOut(); // Das Willkommensschild geht weg

  $("#time").fadeIn(900); //Timer kommt 
  $("#clicker").animate({
    height: 'toggle'
  }); //clicker wird gestartet 

  var dauer = 5;

  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  
})

function startTimer(dauer) {
  let timer = 5;

  zeit = setInterval(function() {
    display.textContent = parseInt(timer); // zeigt sekunden-variable

    --timer; //setzt den timer immer einen herab

    if (timer < 0.00) {

      timer = 5;
      console.log(timer);
      $("#start").fadeIn();
      $("#welcome").fadeIn();
      $("#time").fadeOut();
      $("#clicker").fadeOut();
      $("#clicker").css("margin-top", "10%");
      $("#clicker").css("margin-left", "50%");

      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");

      klick = 0
      console.log(timer);



      clearInterval(zeit)

    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet


  }, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)

};

$("#clicker").click(function() {
  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker
  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert

  klick = klick + 1 //setzt den zähler beim klicken eins hoch
  if (klick % 2 == 0) {
    $("#clicker").animate({
      opacity: '0.3',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
  } else {
    $("#clicker").animate({
      opacity: '1.0',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast")

  }


});

<div><span id="time"></span> </div>
<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>
<button id="start" type=button>Start</button>
<button id="clicker" type=button>KLICK</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="index.js"></script>

Answer 1

正如用户 @Robin Zigmond 所建议的，因为您正在使用 setInterval，所以您每次运行间隔之前都会等待一秒钟。

对此的一个潜在解决方案是将您的代码放在一个函数中，首先调用它，然后设置您的时间间隔。

我在下面附上了一个可行的解决方案:

let klick = 0;
display = document.querySelector('#time');

$("#start").click(function() { //clickfunktion beim starten.
  $("#start").fadeOut(); //Der Startbutton geht weg
  $("#welcome").fadeOut(); // Das Willkommensschild geht weg

  $("#time").fadeIn(900); //Timer kommt 
  $("#clicker").animate({
    height: 'toggle'
  }); //clicker wird gestartet 

  var dauer = 5;

  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  
})

function startTimer(dauer) {
  let timer = 5;
  runTimer();
  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)
  function runTimer(){
    display.textContent = parseInt(timer); // zeigt sekunden-variable

    --timer; //setzt den timer immer einen herab

    if (timer < 0.00) {

      timer = 5;
      console.log(timer);
      $("#start").fadeIn();
      $("#welcome").fadeIn();
      $("#time").fadeOut();
      $("#clicker").fadeOut();
      $("#clicker").css("margin-top", "10%");
      $("#clicker").css("margin-left", "50%");

      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");

      klick = 0
      console.log(timer);

      clearInterval(zeit);

    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet

}
  

};

$("#clicker").click(function() {
  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker
  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert

  klick = klick + 1 //setzt den zähler beim klicken eins hoch
  if (klick % 2 == 0) {
    $("#clicker").animate({
      opacity: '0.3',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
  } else {
    $("#clicker").animate({
      opacity: '1.0',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast")

  }


});

<head>
<link href="style.css" rel="stylesheet">
</head>

<body>

<div><span id="time"></span> </div>
<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>
<button id="start" type=button >Start</button>
<button id="clicker" type=button>KLICK</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="index.js"></script>
</body>

抱歉，我的语言与文档不同，因此评论可能会被关闭。