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

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循环现在没有意义，你将从数组中选择一个选项，而不是color的6十六进制字符。

例：

 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; } 

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

注意，您可以使用radix为16 Number.toString（）来获取数字的十六进制表示。 另外，我在getRandomLinearGradient()方法中使用了模板文字 ，您应该在使用之前检查浏览器兼容性 。

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> 

阅读更多关于线性渐变的信息