js之十六进制的随机颜色的字符串和rgb的随机颜色

js之十六进制的随机颜色的字符串和rgb的随机颜色

在这里插入图片描述
取整数的方法很多:

parseInt() 转为整数,多的不要,
Math.round() 取最近整数,
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机颜色</title>
    <style>
        #box1,#box2{
     
     
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border: solid black 1px;
        }
    </style>
</head>
<body>
    <pre>
        编写一个函数,获得一个十六进制的随机颜色的字符串(如#20CD4F)
        编写一个函数,获得一个rgb的随机颜色的字符串(如rgb(123,216,45))    
    </pre>
    <dir id="box1"></dir>
    <dir id="box2"></dir>
    <script>

        (function(){
     
     
            "use strict"
     var box1=   document.getElementById("box1");
     var box2=   document.getElementById("box2");
        
        setInterval(function randomColor(){
     
     
                var rgbRandom=Math.round(Math.random()*255);
                var rgbRandom1=Math.round(Math.random()*255);
                var rgbRandom2=Math.round(Math.random()*255);
                var color2="0123456789ABCDEF";
                var colorText="";
                var color="";
                color='rgb('+rgbRandom+','+rgbRandom1+','+rgbRandom2+')';
            //    console.log(color);
                box1.style.background=color;      
                for(var i=0;i<6;i++){
     
     
                    var hexRandom1 =parseInt(Math.random()*color2.length);
                        colorText+=color2[hexRandom1];
                }
                var herColor="";
                //  console.log(colorText);
                 herColor="#"+colorText;
            //    console.log(herColor);
               box2.style.background=herColor;
               
        },1000)
     
        })()
        
        
      
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_42590083/article/details/111565733