制作一个小游戏，玩家必须猜测存储的颜色是什么。 预期的最终结果是，当玩家猜对时，会显示一条消息并且背景颜色会发生变化。但是，我的背景颜色仅在您关闭对话框后才会改变。
这是代码。有问题的部分在最后
<!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/