Fatal编程技术网
  • javascript/
  • Javascript Jquery在颜色之间设置动画

Javascript Jquery在颜色之间设置动画

javascript jquery html

Javascript Jquery在颜色之间设置动画,javascript,jquery,html,Javascript,Jquery,Html,相当基本的问题。如果我有一个随机数变量，它从数组中选择一个随机选择，例如“红色”，我希望能够将其存储为当前颜色，同时它在5秒后选择一个新颜色，然后从当前颜色“红色”设置为新颜色，例如“绿色”因此，它会慢慢地将文档的背景或正文从一个渐变到另一个 我有一些代码，我已经写了到目前为止，但我不确定我将如何得到这个，我知道我将不得不存储当前的颜色，如果它被发现，然后找到下一个颜色，但我不知道如何 <!doctype html> <html> <head> &

相当基本的问题。如果我有一个随机数变量，它从数组中选择一个随机选择，例如“红色”，我希望能够将其存储为当前颜色，同时它在5秒后选择一个新颜色，然后从当前颜色“红色”设置为新颜色，例如“绿色”因此，它会慢慢地将文档的背景或正文从一个渐变到另一个

我有一些代码，我已经写了到目前为止，但我不确定我将如何得到这个，我知道我将不得不存储当前的颜色，如果它被发现，然后找到下一个颜色，但我不知道如何

    <!doctype html>
<html>
<head>


<meta charset="UTF-8">
<title>Roger</title>
<link rel="stylesheet" href="Roger.css"/>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>

<script src="Roger.js" type="text/javascript"></script>
</head>

<body>

<div class="container">

  <!-- end .container --></div>
</body>

<script>

var Colours = [];
var randCol;
var curCol;

Colours[0] = "red";
Colours[1] = "green";
Colours[2] = "blue";
Colours[3] = "black";
Colours[4] = "grey";

window.setInterval(function(){
 randCol = Math.floor(Math.random() * 5) + 0

alert(randCol);

var nextCol= Colours[randCol];

    if(Colours[randCol] == Colours[0]) {
 document.body.style.backgroundColor="red";
 curCol = "red"; 
    }
    else if(Colours[randCol] == Colours[1]) {
 document.body.style.backgroundColor="green"; 
  curCol = "green"; 

    }
    else if(Colours[randCol] == Colours[2]) {
 document.body.style.backgroundColor="blue";
  curCol = "green"; 

    }
    else if(Colours[randCol] == Colours[3]) {
 document.body.style.backgroundColor="black"; 
  curCol = "black"; 

    }
    else if(Colours[randCol] == Colours[4]) {
 document.body.style.backgroundColor="grey";
  curCol = "grey"; 

    }


}, 5000);



</script>
</html>


罗杰
var颜色=[]；
var randCol；
var-curCol；
颜色[0]=“红色”；
颜色[1]=“绿色”；
颜色[2]=“蓝色”；
颜色[3]=“黑色”；
颜色[4]=“灰色”；
setInterval（函数（）{
randCol=Math.floor（Math.random（）*5）+0
警报（randCol）；
var nextCol=颜色[randCol]；
if（颜色[randCol]==颜色[0]）{
document.body.style.backgroundColor=“红色”；
curCol=“红色”；
}
else if（颜色[randCol]==颜色[1]）{
document.body.style.backgroundColor=“绿色”；
curCol=“绿色”；
}
else if（颜色[randCol]==颜色[2]）{
document.body.style.backgroundColor=“蓝色”；
curCol=“绿色”；
}
else if（颜色[randCol]==颜色[3]）{
document.body.style.backgroundColor=“黑色”；
curCol=“黑色”；
}
else if（颜色[randCol]==颜色[4]）{
document.body.style.backgroundColor=“灰色”；
curCol=“灰色”；
}
}, 5000);
我想试试这样的

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>Roger</title>
        <link rel="stylesheet" href="Roger.css" />
        <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
        <script src="Roger.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="container">
            <!-- end .container -->
        </div>
        <script>
            var Colours = [
                "red",
                "green",
                "blue",
                "black",
                "grey"
            ],
                prevCol = null;


            window.setInterval(function () {
                var randCol = Math.floor(Math.random() * Colours.length)
                while (randCol === prevCol) randCol = Math.floor(Math.random() * 5);
                prevCol = randCol;
                document.body.style.backgroundColor = Colours[randCol];
            }, 5000);
        </script>
    </body>
</html>


罗杰
变量颜色=[
“红色”，
“绿色”，
“蓝色”，
“黑色”，
“灰色”
],
prevCol=null；
window.setInterval（函数（）{
var randCol=Math.floor（Math.random（）*colors.length）
而（randCol==prevCol）randCol=Math.floor（Math.random（）*5）；
prevCol=randCol；
document.body.style.backgroundColor=颜色[randCol]；
}, 5000);

要使用jQuery设置颜色动画，您需要一个插件，这就是您下一步要做的吗？

要在没有其他插件的情况下从一种颜色淡入另一种颜色，您可以将开始背景色设置为
主体，使用
设置间隔
或
设置超时
函数将
.container
的结束背景色设置为背景色，然后将
.container
的不透明度从0（透明）增量更改为1（可见）。
是否将脚本放置在主体标记之外？抱歉，不知道这和问题有什么关系？看起来更整洁了谢谢！是的，这就是我问题的目的，试图在这些颜色之间进行动画化。我的印象是jquery能够在不同颜色之间制作动画？？不是这样吗？@DanKristianWilliams
$（'body'）.animate（{backgroundColor:colors[randCol]}）并包括任何支持彩色动画的插件，如jQuery彩色或甚至UI。^^他说，jQuery UI支持彩色动画，除非您添加UI库或其他插件，否则jQuery不支持彩色动画，因为UI库相当大，添加它只是为了制作一些颜色的动画没有意义，通常首选插件，这是一把小提琴->啊哈，很好用。我说prevCol拥有最后设定的颜色对吗？我将使用它来动态改变背景颜色。因此，如果我得到的值低于5，它将从最后一个背景设置变为新颜色。目前，我想用一个随机数来测试它。是的，我使用prevCol变量将“previous”颜色保存在循环外，与当前颜色进行比较，这样同一颜色不会连续出现两次。