尝试实现正文标签颜色更改[重复]

Posted 2023-05-08

【中文标题】尝试实现正文标签颜色更改[重复]

【英文标题】：Trying to implement a body tag color change [duplicate]

【发布时间】：2013-08-19 06:37:54

【问题描述】：

我正在学习 javascript/JQuery。

我正在编写一个猜数字游戏，如果用户猜错了，我正在尝试将 .animate() backgroundColor 更改为 id。我已经看到了一些这样的例子，并在我尝试使用的 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.color 来为颜色设置动画：github.com/jquery/jquery-color

我确信@DanielGimenez 是正确的，需要颜色插件或jQuery UI 来为颜色设置动画。

如果猜错了，请使用 CSS 并应用带有过渡的类。

我用我的答案分叉了你的项目。 github.com/DDtMM/hc

【参考方案1】：

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

CSS

body

    transition: 1s;
    -webkit-transition: 1s;


body.blue

    background: blue;


body.red

    background: red;

然后只需使用 javascript 将一个类添加到正文中，就像在这个小提琴中一样：

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

【参考方案2】：

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

这是一种使用 jquery-ui（它是您项目的一部分）以及 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');
);

【讨论】：

哇。绝对让我咀嚼更多！感谢您的帮助。

提示是问题的根源，找到另一种获取输入的方法就可以了，或者等待动画完成后提示。

该项目的最终目标是在网页上使用表单，而不是提示。所以，最终提示不会成为一个因素。