剑轩

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

电脑版发表于:2020/11/19 11:34

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


首先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")];
    }


关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢