示例：

Question

我正在尝试使用函数随机更改背景颜色，但似乎不起作用。

我尝试使用正常/基本颜色，并且可以正常工作。

var change = document.getElementById("meBaby"); // add to the top

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function changeColor() {
    change.style.backgroundColor = getRandomColor();
}

setInterval(changeColor, 10000);

但是，当我尝试更改为线性渐变时，是不可能的，抱歉，我不知道我的错误在哪里。我什至将var color = '#';删除为var color;，以查看其是否有效，但无济于事。参见下面的代码

var change = document.getElementById("meBaby"); // add to the top

function getRandomColor() {
    var letters = ['linear-gradient(120deg, #f6d365 0%, #fda085 100%)',
    'linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)',
    ];
    var color;
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * letters.length)];
    }
    return color;

}

function changeColor() {
    change.style.backgroundColor = getRandomColor();
}
changeColor();
setInterval(changeColor, 10000);

我console.log(changeColor());，但它是不确定的，我不知道为什么。任何帮助将不胜感激。

Answer 1

linear-gradient方法存在一些错误：

1）您必须设置background属性，而不是backgroundColor属性。
2）for循环现在毫无意义，您将从数组中选择一个选项，而不是6的{{1}}十六进制字符。

示例：

color

var change = document.getElementById("meBaby");

function getRandomColor()
{
    var letters = [
      'linear-gradient(120deg, #f6d365 0%, #fda085 100%)',
      'linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)',
      'linear-gradient(to right, #ffffff 0%, #555555 100%)'
    ];

    var color = letters[Math.floor(Math.random() * letters.length)];
    return color;
}

function changeColor()
{
    change.style.background = getRandomColor();
}

changeColor();
setInterval(changeColor, 5000);

#meBaby {
    height: 50px;
    text-align: center;
}

更新

这不是原始问题的答案，但是如果您需要在没有预定义集的情况下生成随机<div id="meBaby">TEST</div>，那么我将像这样进行操作：

linear-gradient

var change = document.getElementById("meBaby");

function getRandom(min, max)
{
    return Math.floor(Math.random() * (max - min) + min);
}

function getRandomColor()
{
    var color = "#";

    for (var i = 0; i < 6; i++)
    {
        color += getRandom(0, 16).toString(16);
    }

    return color;
}

function getRandomLinearGradient()
{
    var d = getRandom(0, 360);
    var c1 = getRandomColor(), c2 = getRandomColor();
    return `linear-gradient(${d}deg, ${c1}, ${c2})`;
}

function changeColor()
{

    change.style.background = getRandomLinearGradient();
    console.log("New background is: ", change.style.background);
}

changeColor();
setInterval(changeColor, 5000);

.as-console {background-color:black !important; color:lime;}

#meBaby {
    height: 50px;
    text-align: center;
}

请注意，您可以将Number.toString()与<div id="meBaby">TEST</div>中的radix一起使用，以获取数字的十六进制表示形式。另外，我在16方法上使用过template literals，在使用之前应检查browser compatibility。

Answer 2

因为要串联变量color，该变量以undefined（具有任何定义的值）开头。

此外，您还要创建一个线性渐变数组，然后将多个渐变串联起来。

只需逐行调试代码，您会注意到这一点。 F12是你的朋友。好的开发人员永远坚持下去。这是您将看到的：

"undefinedlinear-gradient(120deg, #f6d365 0%, #fda085 100%)linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)linear-gradient(120deg, #f6d365 0%, #fda085 100%)linear-gradient(120deg, #f6d365 0%, #fda085 100%)"

您实际上创建渐变的方式有点奇怪，但是您可以使用以下方法解决此问题：

function getRandomColor() {
    var letters = [
        'linear-gradient(120deg, #f6d365 0%, #fda085 100%)',
        'linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)',
    ];
    return letters[Math.floor(Math.random() * letters.length)];
}

最后，使用background CSS属性，而不是backgroundColor CSS属性。

顺便说一句，这将得到两个“不是那么随机”的渐变，因为它们是预定义的。如果您确实想要随机渐变，请使用以下内容：

var change = document.getElementById("meBaby");
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
function getRandomGradient() {
    return 'linear-gradient('+(Math.random()*360)+'deg, '+getRandomColor()+' 0%, '+getRandomColor()+' 100%)';
}

function changeColor() {
    change.style.background = getRandomGradient();
}

changeColor();
setInterval(changeColor, 1000);

<div id="meBaby">TEST</div>

Answer 3

您可以创建一个函数来生成随机的十六进制颜色和设置颜色，并生成随机的角度和设置。

function getRandomColor(){
return  "#000000".replace(/0/g,function(){
    return (~~(Math.random()*16)).toString(16);});
}


setInterval(function(){
document.getElementById("meBaby").style.background = 'linear-gradient('+(Math.random()*360)+'deg,'+ getRandomColor()+ ' 0%,'+getRandomColor()+ ' 100%)';
}, 1000);

#meBaby{
 height:100px;
 width:500px;
}

<div id="meBaby"></div>

更新：您还可以设置随机方向，例如：

function getRandomColor(){
return  "#000000".replace(/0/g,function(){
    return (~~(Math.random()*16)).toString(16);});
}


function getRandomDirection(){
    var directions=['top left','top center','top right','center left','center center','center right','bottom left','bottom center','bottom right'];
   return directions[Math.floor(Math.random() * directions.length)];
}

setInterval(function(){
document.getElementById("meBaby").style.background = 'linear-gradient(to '+getRandomDirection()+','+ getRandomColor()+ ' 0%,'+getRandomColor()+ ' 100%)';
}, 1000);

#meBaby{
 height:100px;
 width:500px;
}

<div id="meBaby"></div>

详细了解linear-gradient

如何使用函数以线性渐变更改背景颜色？

3 个答案:

示例：

更新