如何解决在加载时随机更改 div 渐变背景
所以我想做的是有几个具有相同类名的 div 在加载时更改渐变背景。我已经设法做到这一点,但有颜色。我如何让它改变渐变?
所以代替“红色”,我想要像 linear-gradient(to right,#1565C0,#b92b27)
let colors = [
'red','blue','green','teal','tan','plum'
];
let boxes = document.querySelectorAll(".cardGradient");
for (i = 0; i < boxes.length; i++) {
boxes[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}
解决方法
let colors = [
['red','blue'],['green','teal'],['tan','plum']
];
let boxes = document.querySelectorAll(".cardGradient");
for (i = 0; i < boxes.length; i++) {
colorIndex = colors[Math.floor(Math.random() * colors.length)];
boxes[i].style.background = 'linear-gradient(to right,'+colorIndex[0]+','+colorIndex[1]+')';
}
.cardGradient {
height: 50px;
}
<div class="cardGradient"></div>
采用与纯色背景相同的逻辑,这可以通过类似的方式实现:-
let colors1 = [
'red','blue','green','teal','tan','plum'
];
let colors2 = [
'red','plum'
];
let boxes = document.querySelectorAll(".cardGradient");
for (let i = 0; i < boxes.length; i++) {
boxes[i].style.backgroundImage = `linear-gradient(to right,${colors1[Math.floor(Math.random() * colors1.length)]},${colors2[Math.floor(Math.random() * colors2.length)]} )`;
}
.cardGradient{
width:100px;
height:100px;
}
<div class='cardGradient'></div>
<div class='cardGradient'></div>
<div class='cardGradient'></div>
<div class='cardGradient'></div>
<div class='cardGradient'></div>
<div class='cardGradient'></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。