js给不同用户随机显示不同颜色

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

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

//js随机产生颜色
function randomColor() {
    var str = '#';
    for (var i = 0; i < 6; 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 < 6; i++) {
            str += Math.floor(Math.random() * 16).toString(16);
        }
        return str;
    }

    //检查数组里边的元素是否出现过
    function checkrepeter(array, item) {
        for (var i = 0; i < array.length; i++) {
            //如果有重复就返回ture
            if (array[i] == item)
                return true;
        }
        return false;
    }
    //找到用户id所在数组的下表
    function findUserIdIndex(array, userid) {
        for (var i = 0; i < array.length; 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 < logItem.length; 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 < logItem.length; 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 < 6; 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 < divs.length; i++) {

        var userid = divs[i].getAttribute("userid");
        if (!colors[userid]) {
            colors[userid] = randomColor();
        }
       
    }

    for (var i = 0; i < divs.length; i++) {
        divs[i].style.backgroundColor = colors[divs[i].getAttribute("userid")];
    }