javascript 怎么给三个div随机一个数组颜色，每次随机三个div的颜色都是不重复的
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 怎么给三个div随机一个数组颜色，每次随机三个div的颜色都是不重复的相关的知识，希望对你有一定的参考价值。
麻烦给一下代码，谢谢
var r = Math.round((Math.random()*255)).toString(16);
var g = Math.round((Math.random()*255)).toString(16);
var b = Math.round((Math.random()*255)).toString(16);
var color = "#"+r+g+b;
// color : "#8c5aff";
//上面是示例生成一个颜色，不过生成方法都是一样的。你可以使用循环生成。追问
是这样的，我要给这三个div随机颜色，每次刷新他们的颜色不能重复；
//获取颜色数组
var colors = [];
while (colors.length < 3)
var color = "#";
for (var i = 0; i < 3; i++)
var n = Math.round((Math.random() * 255));
if (n <= 16)
color += "0";
color += n.toString(16);
else
color += Math.round((Math.random() * 255)).toString(16);
colors.push(color);
//为div赋值颜色
document.getElementById("d1").style.background = colors[0];
document.getElementById("d2").style.background = colors[1];
document.getElementById("d3").style.background = colors[2];追问
再问个最后一个问题
我将颜色放在数组里，然后用这里的颜色给那三个div随机颜色，每次刷新都不重复。我用的是javascript。再次麻烦你了
<style>
div
width: 200px;
height: 200px;
border: 1px solid blue;
margin-top: 10px;
</style>
</head>
<body>
<button>开始变换颜色</button>
<button>关闭</button>
<div></div>
<div></div>
<div></div>
</body>
</html>
<script>
var toBtn = document.getElementsByTagName('button')[0]; //按钮
var toBtn2 = document.getElementsByTagName('button')[1]; //按钮
var oDiv = document.getElementsByTagName('div');
var arr = ["red", "green", "yellow", "pink", "orange", "blue", "deeppink", "gray"]; //存储颜色的数组
var time = "";
toBtn.onclick = function ()
time = setInterval(function ()
for (let i = 0; i < oDiv.length; ++i)
for (let j = 0; j < arr.length; ++j)
var r = Math.floor(Math.random() * arr.length);
oDiv[i].style.background = arr[r];
, 50);
toBtn2.onclick = function ()
clearInterval(time);
如何将数组中的类随机分配给for循环中创建的元素
【中文标题】如何将数组中的类随机分配给for循环中创建的元素【英文标题】：How to assign classes in an array randomly to an element created in for loop 【发布时间】：2019-02-25 11:40:11 【问题描述】：我正在使用 for 循环来创建许多 div、分配类名并附加到父 div。我遇到的困难是另外包括更多的类——随机的——来自一个数组。下面是一个sn-p。
let classesArray = ['slowest', 'slow', 'medium', 'fast', 'fastest'];
let randomClass = classesArray[Math.floor(Math.random() * classesArray.length)];
for (i = 0; i < 100; i++)
const test = document.createElement('div');
test.className = 'speed ' + randomClass;
document.getElementById('div-parent').appendChild(test);
我能够创建具有“速度”类的子 div，并且还包括一个随机类，但我在所有 div 上都获得了相同的随机类。
我希望它看起来像这样
<div id="div-parent">
<div class="speed fast"></div>
<div class="speed slow"></div>
<div class="speed medium"></div>
...
但结果是这样的
<div id="div-parent">
<div class="speed fast"></div>
<div class="speed fast"></div>
<div class="speed fast"></div>
...
是否可以从数组中随机选择一个类而不在所有子 div 上重复？
【问题讨论】：
在循环内移动随机语句 Voting to close as 这个问题是由无法再重现的问题或简单的印刷错误引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。这通常可以通过在发布之前确定并仔细检查重现问题所需的最短程序来避免。 【参考方案1】：randomClass 是在循环之外创建的，它在循环的每个迭代中具有相同的值。
在循环内声明randomClass，这样它就可以在每次迭代中获取新生成的随机类：
let classesArray = ['slowest', 'slow', 'medium', 'fast', 'fastest'];
for (let i = 0; i < 3; i++)
let randomClass = classesArray[Math.floor(Math.random() * classesArray.length)];
const test = document.createElement('div');
test.className = 'speed ' + randomClass;
document.getElementById('div-parent').appendChild(test);
console.log(document.getElementById('div-parent').innerHTML)<div id="div-parent"></div>【讨论】：
真的值得回答吗？【参考方案2】：您的代码错误...
因为let randomClass = classesArray[Math.floor(Math.random() * classesArray.length)]; 存在于外部循环中。
移动内循环~
let classesArray = ['slowest', 'slow', 'medium', 'fast', 'fastest'];
for (i = 0; i < 100; i++)
const randomIndex = Math.floor(Math.random() * classesArray.length));
const randomClass = classesArray[randomIndex];
const test = document.createElement('div');
test.className = 'speed ' + randomClass;
document.getElementById('div-parent').appendChild(test);
【讨论】：
以上是关于javascript 怎么给三个div随机一个数组颜色，每次随机三个div的颜色都是不重复的的主要内容，如果未能解决你的问题，请参考以下文章