个人中心
gpt4 book ai didi

javascript - 为什么我的警告消息和背景颜色变化不同时执行？

转载 作者：可可西里 更新时间：2023-11-01 12:59:42 25 4
gpt4 key购买 nike

我正在尝试让我的最终警报消息“Congratulations...”和 HTML 背景颜色同时发生变化。颜色变化发生在之后 我单击已显示的警报消息的“确定”按钮。我哪里错了？

不可否认，有一个类似的问题，虽然我没有从建议的解决方案中得到任何指示。 

let myColors = ["red", "purple", "blue",
  "orange", "violet", "green",
  "amber", "olive", "navy",
  "maroon", "lime", "yellow", "chartreuse",
  "crimson", "wheat", "deeppink",
  "gold", "beige", "turquoise"
];

let yourColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();

function yourGuessedColor() {
  while (myColors.indexOf(yourColor) <= -1) {
    alert("Sorry, I don't recognize your color.\n\nPlease try again.");
    yourColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();
  }
  return yourColor;
}

let guessedColor = yourGuessedColor();
let guesses = 1;

function colorGame() {
  let myFavColor = myColors[Math.floor(Math.random() * myColors.length)];
  while (guessedColor != myFavColor) {
    if (guessedColor > myFavColor) {
      alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically higher than mine.\n\nPlease try again.");
      guessedColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();
    } else {
      alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically lower than mine.\n\nPlease try again.");
      guessedColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();
    }
    guesses++;
    document.body.style.backgroundColor = myFavColor;
  }
  return alert("Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.");
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Guessing Game</title>
</head>

<body onload="colorGame()">
  <script type="text/javascript">
  </script>
</body>

</html>

最佳答案

这里实际上发生了两件事。如评论中所述，Javascript 是单线程的，在执行下一条指令之前，会有一个警告框等待您点击。在您的情况下，一种可能性是在显示警告框之前简单地更改颜色:

                //CHANGE THE COLOR BEFORE ALERTING
                document.body.style.backgroundColor = guessedColor;
                return alert("Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.");

但是这里还有其他事情发生。看起来即使您首先触发更改背景颜色的命令，警告框也会在指令(更改颜色)完成之前被触发。警告框会停止浏览器中的线程，并且还必须包含颜色更改指令。我不确定这是否是错误。而且我只在 Chrome 中尝试过，所以我不确定其他浏览器。

解决此问题的一种方法是将警告框置于延迟计时器上，如下所示:

  document.body.style.backgroundColor = guessedColor;
  var alertMsg = "Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.";
  setTimeout(function(){alert(alertMsg)},100);

这是一个工作示例:https://jsfiddle.net/Lzcht5dz/1/

关于javascript - 为什么我的警告消息和背景颜色变化不同时执行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41962628/

25 4 0
文章推荐： php - 为什么在进行集成测试时必须重新加载 Auth::user()
文章推荐： c++ - 在资源管理器中打开
文章推荐： php - laravel echo 与 redis 和 socket io
文章推荐： windows - 所有 Windows PC 显示器上的每英寸像素数都是标准的吗？ (LogPixelsX) 在 GetDeviceCaps WinAPI 调用中
可可西里
个人简介

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

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