根据数字生成颜色

最新推荐文章于 2023-03-22 16:19:19 发布

Dettan

最新推荐文章于 2023-03-22 16:19:19 发布

阅读量1.5k

点赞数 3

分类专栏：网站

本文链接：https://blog.csdn.net/hello_plane/article/details/89459778

版权

网站专栏收录该内容

1 篇文章 0 订阅

订阅专栏

https://www.cnblogs.com/mycognos/p/9153689.html 这个网址是随机生成颜色的一个文章,他的基础代码非常好我直接用了.

我的目的就是给聊天框头像弄成根据id生成颜色,每个id生成的颜色一直都是一个,不是随机生成.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{text-align: center;}
            li{height:50px;width:50px;background:red;position:absolute;list-style:none;text-align: center;color:white;line-height:50px;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var text1=document.getElementById("texta");
                var btn1=document.getElementById("btn");
                var ul1=document.getElementById("ul");            
                btn1.onclick=function(){
                    for(var i=0;i<parseInt(text1.value);i++){
                        
                        var li1=document.createElement("li");
                        li1.style.left=li1.offsetLeft+i%20*64+"px";
                        li1.style.top=li1.offsetTop+parseInt(i/20)*64+64+"px";  // 实现换行
                        li1.innerHTML=i+1;
                        li1.style.background=random_load(i);
                        ul1.appendChild(li1);
                        
                    }
                }
            }
            function colorById(i){
				if(i<10)i=i*302.3;
				if(i<100)i=i*31.2;
				for(;i>255;i*=0.98);
				var temp=i.toString().substring(i.toString().length-3);
				i+=parseInt(temp);
                for(;i>255;i-=255);
                i=parseInt(i);
                if(i<10)i+=10;

                var R=i*(i/100);
                for(;R>255;R-=255);
                if(R<50)R+=60;
                R=parseInt(R).toString(16);

                var G=i*(i%100);
                for(;G>255;G-=255);
                if(G<50)G+=60;
                G=parseInt(G).toString(16);

                var B=i*(i%10);
                for(;B>255;B-=255);
                if(B<50)B+=60;
                B=parseInt(B).toString(16);

                console.log(i+":"+R+":"+G+":"+B);
                return "#"+R+G+B;
            }
            function hao(min,max){
                  return parseInt(Math.random()*(max-min+1)+min)
            }
            function aaa(r,g,b){                  
                  r=r.length==1?"0"+r:r;
                  g=g.length==1?"0"+g:g;
                  b=b.length==1?"0"+b:b;    //随机会获取到5位的十六进制数，不能作为颜色值，所以用这个方法解决，还请前辈多多指点  ^-^！
                  return r+g+b;
            }
        </script>
    </head>
    <body>
        <input type="text" name="texta" id="texta" value="" />
        <input type="button" name="btn" id="btn" value="生成DIV" />
        <ul id="ul">
        </ul>
    </body>
</html>

效果

Dettan

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
根据数字生成颜色

https://www.cnblogs.com/mycognos/p/9153689.html这个网址是随机生成颜色的一个文章,他的基础代码非常好我直接用了.我的目的就是给聊天框头像弄成根据id生成颜色,每个id生成的颜色一直都是一个,不是随机生成.<!DOCTYPE html><html> <head> <me...
复制链接

扫一扫