Javascript 在页面上加载填充一个分区中的随机颜色。用随机颜色填充另外4个分区。。。单击这4个分区中的任意一个，以9:1的比例填充主分区_Javascript_Background Color_Dom Manipulation

Javascript 在页面上加载填充一个分区中的随机颜色。用随机颜色填充另外4个分区。。。单击这4个分区中的任意一个，以9:1的比例填充主分区

javascript

Javascript 在页面上加载填充一个分区中的随机颜色。用随机颜色填充另外4个分区。。。单击这4个分区中的任意一个，以9:1的比例填充主分区,javascript,background-color,dom-manipulation,Javascript,Background Color,Dom Manipulation,在页面上加载填充一个分区中的随机颜色。用随机颜色填充另外4个分区。。。单击这4个div中的任何一个，选择单击div的颜色，并以9:1的比例填充主div（90%来自主div，10%来自单击div）。。。我的解决方案看起来太长。。。可以再短一点吗。 //我的解决方案文件 <style> #main { height: 200px; width: 260px;

在页面上加载填充一个分区中的随机颜色。用随机颜色填充另外4个分区。。。单击这4个div中的任何一个，选择单击div的颜色，并以9:1的比例填充主div（90%来自主div，10%来自单击div）。。。我的解决方案看起来太长。。。可以再短一点吗。 //我的解决方案文件

        <style>
            #main {
                height: 200px;
                width: 260px;
                display: block;
                margin: 10px;
            }

            #container div {
                height: 50px;
                width: 50px;
                display: inline-block;
                margin: 10px;

            }
        </style>
    </head>
    <body>
<div id='main'></div>

<div id='container'></div>

    </body>

    <script>
        function getRandomColor() {
            const randomColor = { r: getRandomArbitrary(0, 255), g: getRandomArbitrary(0, 255), b: getRandomArbitrary(0, 255) };
            return randomColor;
        }
        function getRandomArbitrary(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }        
        const colorCode = getRandomColor();
        document.getElementById('main').style.backgroundColor = "rgb("+colorCode.r+","+colorCode.g+","+colorCode.b+")"; 

        let container = document.getElementById('container');

        for(let i=0; i<4; i++) {
            const colorBlock = document.createElement('div')
            const colorCode = getRandomColor();
            colorBlock.style.backgroundColor = "rgba("+colorCode.r+","+colorCode.g+","+colorCode.b+")";
            container.appendChild(colorBlock);
        }

        container.addEventListener('click', updateColor, false)

        function updateColor() {
            const mainDivColor = getComputedStyle(document.getElementById('main')).backgroundColor;
            const mainDivColorStr = mainDivColor.substring(mainDivColor.indexOf('(')+1, mainDivColor.indexOf(')'));
            const mainDivColorArr = mainDivColorStr.split(',').map(function(item) { return item.trim();});

            const currentColor = getComputedStyle(event.target).backgroundColor;
            const currentColorStr = currentColor.substring(currentColor.indexOf('(')+1, currentColor.indexOf(')'));
            const currentColorArr = currentColorStr.split(',').map(function(item) {return item.trim();});

            let newColor = []
            let newColorObj = {}
            let colorCodeArr = ['r','g','b']

            for(let i=0; i<mainDivColorArr.length; i++){

                newColor.push( Math.round( (mainDivColorArr[i] * 0.9) +  (currentColorArr[i] * 0.1) ));
            }

            //TODO - build object dynamically
            newColorObj={'r': newColor[0], 'g': newColor[1], 'b':newColor[2]}

            console.log(newColorObj)
            document.getElementById('main').style.backgroundColor = "rgba("+newColorObj.r+","+newColorObj.g+","+newColorObj.b+")"; 
        }

    </script>
</html>


#主要{
高度：200px；
宽度：260px；
显示：块；
利润率：10px；
}
#货柜组{
高度：50px；
宽度：50px；
显示：内联块；
利润率：10px；
}
函数getRandomColor（）{
const randomColor={r:getrandomArbitral（0255），g:getrandomArbitral（0255），b:getrandomArbitral（0255）}；
返回随机颜色；
}
函数GetRandomArbital（最小值、最大值）{
返回Math.round（Math.random（）*（max-min）+min）；
}        
const colorCode=getRandomColor（）；
document.getElementById（'main'）.style.backgroundColor=“rgb（“+colorCode.r+”，“+colorCode.g+”，“+colorCode.b+”）；
让container=document.getElementById（'container'）；
for（设i=0；IsShared on:codepen上的代码共享：