正在尝试实现body标记颜色更改

Trying to implement a body tag color change

本文关键字：颜色 body 实现      更新时间：2023-09-26

我正在学习Javascript/JQuery。

我正在写一个guess-and-number游戏，如果用户猜测错误，我将尝试在id上.animate()和backgroundColor的更改。我已经看到了一些这样的例子，并在JQuery网站上找到了一个我正在尝试使用的例子。

您可以在此处查看代码：https://github.com/thecompu/hc

否则，它就在下面。

注意：如果你在浏览器中运行index.html，随机数字会记录到控制台中，但如果你没有打开控制台，你就看不到它。不过，数字选择只能在1到10之间。

现在发生的情况是，如果你猜错了号码，就会按照我的意愿再次提示你。但我也希望身体背景颜色变为红色。相反，背景颜色是在用户给出正确答案后改变的，并且没有动画。

$(document).ready(function () {
    var answer = Math.floor(Math.random() * 10) + 1;
    console.log(answer);
    function game() {
        var guess = prompt("Choose a number!");
        guess = Number(guess);
        if (guess !== answer) {
            $("#bg").animate({
                backgroundColor: "#F00",
                color: "#000",
            }, 1000);
            console.log("Nope!");
            game();
        } else {
            console.log("Yay!");
        }
    }
    game();
});

您不能在本机使用jQuery设置背景颜色的动画。但是，您可以使用CSS转换来做同样的事情，只使用body类。

CSS

body
{
    transition: 1s;
    -webkit-transition: 1s;
}
body.blue
{
    background: blue;
}
body.red
{
    background: red;
}

然后简单地使用javascript将一个类添加到主体中，就像下面的fiddle：

http://jsfiddle.net/jakelauer/bUNkJ/

即使项目中包含jquery颜色，问题仍然存在。问题的根源在于prompt的使用。它可以防止浏览器执行，而且由于您一直在重新调用它，因此永远不会给动画发生的机会。

以下是一种使用jqueryui（它是您项目的一部分）和jquery.color的事件驱动方法

$(document).ready(function () {
    $('#guessPrompt').dialog({
        autoOpen: false,
        buttons: {}
    });
    $('#guessInput').keypress(function () {
        if ($('#guessInput').val() != answer) {
            $('#guessInput').val('');
            $('#guessPrompt').dialog('close');
            $("#bg").animate({
                backgroundColor: "#F00",
                color: "#000"
            }, {
                duration: 1000,
                always: function () {
                    console.log('hi');
                    $('#guessPrompt').dialog('open');
                    $('#bg').css('backgroundColor', '#888');
                }
            });
            console.log('Nope');
        } else {
            console.log('yay');
        }
    });
    var answer = Math.floor(Math.random() * 10) +1;
    $('#guessPrompt').dialog('open');
});
相关文章：