个人中心
gpt4 book ai didi

javascript - 背景颜色变化出现意外延迟

转载 作者：行者123 更新时间：2023-11-28 04:47:18 25 4
gpt4 key购买 nike

制作一个小游戏，玩家必须猜测存储的颜色是什么。预期的最终结果是，当玩家猜对时，会显示一条消息并且背景颜色会发生变化。但是，我的背景颜色仅在您关闭对话框后才会改变。

这是代码。有问题的部分在最后

<!DOCTYPE HTML>
<html>
<body onload="do_game()">

<script>
var colors = ["blue","red","yellow","green","brown",
          "magenta","purple","aqua","coral",
          "violet","pink","grey","cyan","black","white"];
var target;
var guess_count = 0;
var guess_input;
var game_end; false;

function do_game(){ //Start of function do_game //
        colors.sort();
        target = Math.floor(Math.random() * colors.length);
        alert(colors[target]);

        do {
        guess_input = prompt(
        "I am thinking of one of these colors \n\n" +
        colors +"\n\nWhat color am I thinking of?")

        guess_count ++;

        }
        while (check_guess());
      } //end of function do_game //

function check_guess(){ //start of function check_guess//
        var color_guess = colors.indexOf(guess_input);
        if (color_guess < 0)
          alert("I don't recognise that color!\n\n"
                + "Please try again");
        else if (color_guess < target)
          alert("Sorry your guess is not correct!\n\n"
                + "Hint: Your guess is aphebetically lower\n\n"
                + "Please try again!");
        else if (color_guess > target)
          alert("Sorry your guess is not correct!\n\n"
                + "Hint: Your guess is aphebetically higher\n\n"
                + "Please try again!");
        else {
          document.body.style.background = colors[target];
          alert("Congratulations!\n\n" + "You guessed " + colors[target]
                + "\n\nThis is correct!\n\n"
                + "It took you " + guess_count + " guesses");
          return false;
        }
          return true;
        }
</script>
</body>
</html>

最佳答案

问题是警报框会停止 JavaScript 流，直到它们得到响应。您可以通过使用 setTimeout 函数在调用警报框之前设置一毫秒的延迟来解决此问题:

else {
  document.body.style.background = colors[target];
  setTimeout(makeTimeoutFunc(), 1); // 1 millsecond
  return false;
}

...

function makeTimeoutFunc() {
    return function() {
        alert("Congratulations!\n\n" + "You guessed " + colors[target] + "\n\nThis is correct!\n\n" + "It took you " + guess_count + " guesses");
    }
}

我创建了一个 JSFiddle 来展示这个 here .

希望这有帮助! :)

关于javascript - 背景颜色变化出现意外延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43245317/

25 4 0
文章推荐： javascript - 无法关闭滚轮导航
文章推荐： javascript - 在 HTML textArea 中的每个文本后面添加一个空格
文章推荐： javascript - 如果函数中的语句不起作用
文章推荐： javascript - 1000hz Bootstrap 验证无法正常工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com