计算两个颜色之间的差距 #24

damoclesX · 2016-02-03T01:19:54Z

之前看到的面试题，记录一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="color"  id="color1">——
    <input type="color"  id="color2" value="#ffffff"><br>
    <input type="text" id="number" value="10">
    <button id="create">创建</button>
    <div id="list">

    </div>
    <script>
        var oNumber = document.getElementById('number');
        var oCreate = document.getElementById('create');
        var oList   = document.getElementById('list');
        var oColor1 = document.getElementById('color1');
        var oColor2 = document.getElementById('color2');

        oCreate.onclick = function(){
            var sColor1 = oColor1.value;
            var sColor2 = oColor2.value;

            var colors = createColors(sColor1, sColor2, ~~oNumber.value);
            createDivs(colors,oList)
        };
        console.log(1);
        // #000000
        // 0123456
        function toRGB(color){
            var res = {};
            if(color.charAt(0) == '#'){
                res.r = parseInt(color.substring(1,3),16);
                res.g = parseInt(color.substring(3,5),16);
                res.b = parseInt(color.substring(5,7),16);
            }
            return res;
        };
        function toHex(r, g, b){
            console.log(r, g, b);
            return '#'+zerozise(r).toString(16)+zerozise(g).toString(16)+zerozise(b).toString(16);
        };
        function zerozise(n){
            return n<10 ? '0'+n: n
        }
        function createColors(color1, color2, number){
            number = number || 10;
            var oC = toRGB(color1);
            var oC2 = toRGB(color2);
            console.log(oC,oC2);

            var r = (oC2.r-oC.r)/number;
            console.log(r);
            var g = (oC2.g-oC.g)/number;
            console.log(g);
            var b = (oC2.b-oC.b)/number;
            console.log(b);
            var colors = [];

            for (var i = 0; i < number+1; i++) {
                var tr = Math.min(255, Math.ceil(oC.r+r*i));
                var tg = Math.min(255, Math.ceil(oC.g+g*i));
                var tb = Math.min(255, Math.ceil(oC.b+b*i));
                colors.push('rgb('+tr+', '+tg+', '+tb+')');
            };
            return colors;
        }
        function createDivs(colors, container){
            container.innerHTML = colors.map(function(e){
                return '<div style="height:5px;background-color:'+e+'"></div>';
            }).join('');
            console.log(container.children.length);
        }
    </script>
</body>
</html>

damoclesX added the js label Feb 3, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

计算两个颜色之间的差距 #24

计算两个颜色之间的差距 #24

damoclesX commented Feb 3, 2016

计算两个颜色之间的差距 #24

计算两个颜色之间的差距 #24

Comments

damoclesX commented Feb 3, 2016