html产生随机不同颜色,js给不同用户随机显示不同颜色

彼年豆蔻，谁许谁地老天荒。

首先js随机产生颜色

思路就是随机产生6个16进制的数字即可//js随机产生颜色

function randomColor() {

var str = '#';

for (var i = 0; i 

str += Math.floor(Math.random() * 16).toString(16);

}

return str;

}

不同用户随机显示不同颜色思路分析：

第一步：如果有两个用户，动态产生两个颜色，存储在键值对里边    [用户id,用户颜色(随机生成)]

如果有n个用户，动态产生n个颜色

html结构如下：放了一个userid的自定义属性

键值对我们可以使用两个数组来模拟实现，只要是一一对应就类似一个键值对，代码如下：//js随机产生颜色

function randomColor() {

var str = '#';

for (var i = 0; i 

str += Math.floor(Math.random() * 16).toString(16);

}

return str;

}

//检查数组里边的元素是否出现过

function checkrepeter(array, item) {

for (var i = 0; i 

//如果有重复就返回ture

if (array[i] == item)

return true;

}

return false;

}

//找到用户id所在数组的下表

function findUserIdIndex(array, userid) {

for (var i = 0; i 

//找到位置就返回下标

if (array[i] == userid)

return i;

}

}

/*第一步：如果有两个用户，动态产生两个颜色，存储在键值对里边    [用户id,用户颜色(随机生成)]

如果有n个用户，动态产生n个颜色

*/

var logItem = document.getElementsByClassName("logItem");

//定义存放颜色的数组

var colors = new Array();

//定义用户id的数组

var userids = new Array();

for (var i = 0; i 

var userId = logItem[i].getAttribute("userid");

if (!checkrepeter(userids, userId)) {

//向存放用户id数组添加值

userids.push(userId);

//给用户id对应添加一个颜色。可以使用两个数组，只要是一一对应就类似一个键值对

colors.push(randomColor());

}

}

console.log(userids);

console.log(colors);

第二步：使用用户id去取颜色即可

代码如下：//第二步：使用用户id去取颜色即可

for (var i = 0; i 

var userId = logItem[i].getAttribute("userid");

//1：通过用户id找到这个用户id是在用户数组里边的下标

var userIndex = findUserIdIndex(userids, userId);

console.log(userIndex);

//2：找到下标去对应颜色就可以了

logItem[i].style.backgroundColor = colors[userIndex];

}

下面贴一下使用键值对的做法要简单一些：//不同用户随机不同颜色

function randomColor() {

var str = '#';

for (var i = 0; i 

str += Math.floor(Math.random() * 16).toString(16);

}

return str;

}

var colors = [];

var container = document.getElementById("container");

var divs = container.getElementsByClassName("logItem");

for (var i = 0; i 

var userid = divs[i].getAttribute("userid");

if (!colors[userid]) {

colors[userid] = randomColor();

}

}

for (var i = 0; i 

divs[i].style.backgroundColor = colors[divs[i].getAttribute("userid")];

}

欢迎加群讨论技术，群号：677373950