颜色规律选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="position: relative;left: 400px;"><input type="color" value="#ff0000" /></div>
        
        <div id="Container" ></div>
        <script type="text/javascript">
            
                
            document.writeln('<br/>');document.writeln('<br/>');
            
            var aaaaaa = [];
            var colorArr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
            for (var i = 0;i<colorArr.length;i++) {
                var str1= '#'+colorArr[i]+colorArr[i]+colorArr[i]+colorArr[i]+colorArr[i]+colorArr[i];
                aaaaaa.push(str1);//得到#aaaaaa类型的字符串值的数组----------------------------------------------------------
            }
            
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var aaaaab = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    if(i!=j){
                        var str= '#'+colorArr[i]+colorArr[i]+colorArr[i]+colorArr[i]+colorArr[i]+colorArr[j];
                    }else{
                        var str = "";
                    }
                    aaaaab.push(str);//得到#aaaaab类型的字符串值的数组--------------------------------------------------------------
                }
            }
            
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var abbbbb = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    if(i!=j){
                        var str= '#'+colorArr[i]+colorArr[j]+colorArr[j]+colorArr[j]+colorArr[j]+colorArr[j];
                    }else{
                        var str = "";
                    }
                    abbbbb.push(str);//得到#abbbbb类型的字符串值的数组--------------------------------------------------------------
                }
            }
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var aabbaa = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    if(i!=j){
                        var str= '#'+colorArr[i]+colorArr[i]+colorArr[j]+colorArr[j]+colorArr[i]+colorArr[i];
                    }else{
                        var str = "";
                    }
                    aabbaa.push(str);//得到#aabbaa类型的字符串值的数组----------------------------------------------------------------
                }
            }
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var aaaabb = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    if(i!=j){
                        var str= '#'+colorArr[i]+colorArr[i]+colorArr[i]+colorArr[i]+colorArr[j]+colorArr[j];
                    }else{
                        var str = "";
                    }
                    aaaabb.push(str);//得到#aaaabb类型的字符串值的数组----------------------------------------------------------------
                }
            }
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var aabbbb = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    if(i!=j){
                        var str= '#'+colorArr[i]+colorArr[i]+colorArr[j]+colorArr[j]+colorArr[j]+colorArr[j];
                    }else{
                        var str = "";
                    }
                    aabbbb.push(str);//得到#aabbbb类型的字符串值的数组-----------------------------------------------------------------
                }
            }
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var ababab = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    if(i!=j){
                        var str= '#'+colorArr[i]+colorArr[j]+colorArr[i]+colorArr[j]+colorArr[i]+colorArr[j];
                    }else{
                        var str = "";
                    }
                    ababab.push(str);//得到#ababab类型的字符串值的数组----------------------------------------------------------------
                }
            }
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var abaaaa = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    if(i!=j){
                        var str= '#'+colorArr[i]+colorArr[j]+colorArr[i]+colorArr[i]+colorArr[i]+colorArr[i];
                    }else{
                        var str = "";
                    }
                    abaaaa.push(str);//得到#abaaaa类型的字符串值的数组----------------------------------------------------------------
                }
            }
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var aabaaa = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    if(i!=j){
                        var str= '#'+colorArr[i]+colorArr[i]+colorArr[j]+colorArr[i]+colorArr[i]+colorArr[i];
                    }else{
                        var str = "";
                    }
                    aabaaa.push(str);//得到#aabaaa类型的字符串值的数组----------------------------------------------------------------
                }
            }
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var aaabaa = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    if(i!=j){
                        var str= '#'+colorArr[i]+colorArr[i]+colorArr[i]+colorArr[j]+colorArr[i]+colorArr[i];
                    }else{
                        var str = "";
                    }
                    aaabaa.push(str);//得到#aaabaa类型的字符串值的数组-------------------------------------------------------------------
                }
            }
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var aabaab = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    if(i!=j){
                        var str= '#'+colorArr[i]+colorArr[i]+colorArr[j]+colorArr[i]+colorArr[i]+colorArr[j];
                    }else{
                        var str = "";
                    }
                    aabaab.push(str);//得到#aabaab类型的字符串值的数组-----------------------------------------------------------------
                }
            }
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var abbabb = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    if(i!=j){
                        var str= '#'+colorArr[i]+colorArr[j]+colorArr[j]+colorArr[i]+colorArr[j]+colorArr[j];
                    }else{
                        var str = "";
                    }
                    abbabb.push(str);//得到#abbabb类型的字符串值的数组-------------------------------------------------------------
                }
            }
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var aabbcc = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    for(var k = 0;k<colorArr.length;k++){
                        if(i!=j&&j!=k&&i!=k){
                            var str= '#'+colorArr[i]+colorArr[i]+colorArr[j]+colorArr[j]+colorArr[k]+colorArr[k];
                        }else{
                            var str = "";
                        }
                        aabbcc.push(str);//得到#aabbcc类型的字符串值的数组
                    }    
                }
            }
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
            var abcabc = [];
            for (var i = 0;i<colorArr.length;i++) {
                for(var j = 0;j<colorArr.length;j++){
                    for(var k = 0;k<colorArr.length;k++){
                        if(i!=j&&j!=k&&i!=k){
                            var str= '#'+colorArr[i]+colorArr[j]+colorArr[k]+colorArr[i]+colorArr[j]+colorArr[k];
                        }else{
                            var str = "";
                        }
                        abcabc.push(str);//得到#abcabc类型的字符串值的数组
                    }    
                }
            }
            
            
            
            document.writeln('<br>');document.writeln('<br/>');
            
        var colorContainer = document.getElementById('Container');
            colorContainer.style.width=800+'px';
            colorContainer.style.height='auto';
            colorContainer.style.position='relative';
            colorContainer.style.margin='0 auto';
        
        for (var i=0;i<aaaaaa.length;i++) {
            var createaaaaaa = document.createElement('div');
            createaaaaaa.style.width=80+'px';
            createaaaaaa.style.height=20+'px';
            createaaaaaa.style.position='relative';
            createaaaaaa.style.marginRight='8px';
            createaaaaaa.style.marginTop='4px';
            createaaaaaa.style.float='left';
            createaaaaaa.style.textAlign='center';
            createaaaaaa.style.color='#fff';
            createaaaaaa.style.backgroundColor=aaaaaa[i];
            createaaaaaa.innerHTML=aaaaaa[i];
            colorContainer.appendChild(createaaaaaa);
        }
        for (var i=0;i<aaaaab.length;i++) {
            var createaaaaab = document.createElement('div');
            createaaaaab.style.width=80+'px';
            createaaaaab.style.height=20+'px';
            createaaaaab.style.position='relative';
            createaaaaab.style.marginRight='8px';
            createaaaaab.style.marginTop='4px';
            createaaaaab.style.float='left';
            createaaaaab.style.textAlign='center';
            createaaaaab.style.color='#fff';
            createaaaaab.style.backgroundColor=aaaaab[i];
            createaaaaab.innerHTML=aaaaab[i];
            colorContainer.appendChild(createaaaaab);
        }
        for (var i=0;i<abbbbb.length;i++) {
            var createabbbbb = document.createElement('div');
            createabbbbb.style.width=80+'px';
            createabbbbb.style.height=20+'px';
            createabbbbb.style.position='relative';
            createabbbbb.style.marginRight='8px';
            createabbbbb.style.marginTop='4px';
            createabbbbb.style.float='left';
            createabbbbb.style.textAlign='center';
            createabbbbb.style.color='#fff';
            createabbbbb.style.backgroundColor=abbbbb[i];
            createabbbbb.innerHTML=abbbbb[i];
            colorContainer.appendChild(createabbbbb);
        }
        for (var i=0;i<aabbaa.length;i++) {
            var createaabbaa = document.createElement('div');
            createaabbaa.style.width=80+'px';
            createaabbaa.style.height=20+'px';
            createaabbaa.style.position='relative';
            createaabbaa.style.marginRight='8px';
            createaabbaa.style.marginTop='4px';
            createaabbaa.style.float='left';
            createaabbaa.style.textAlign='center';
            createaabbaa.style.color='#fff';
            createaabbaa.style.backgroundColor=aabbaa[i];
            createaabbaa.innerHTML=aabbaa[i];
            colorContainer.appendChild(createaabbaa);
        }
        for (var i=0;i<aaaabb.length;i++) {
            var createaaaabb = document.createElement('div');
            createaaaabb.style.width=80+'px';
            createaaaabb.style.height=20+'px';
            createaaaabb.style.position='relative';
            createaaaabb.style.marginRight='8px';
            createaaaabb.style.marginTop='4px';
            createaaaabb.style.float='left';
            createaaaabb.style.textAlign='center';
            createaaaabb.style.color='#fff';
            createaaaabb.style.backgroundColor=aaaabb[i];
            createaaaabb.innerHTML=aaaabb[i];
            colorContainer.appendChild(createaaaabb);
        }
        for (var i=0;i<aabbbb.length;i++) {
            var createaabbbb = document.createElement('div');
            createaabbbb.style.width=80+'px';
            createaabbbb.style.height=20+'px';
            createaabbbb.style.position='relative';
            createaabbbb.style.marginRight='8px';
            createaabbbb.style.marginTop='4px';
            createaabbbb.style.float='left';
            createaabbbb.style.textAlign='center';
            createaabbbb.style.color='#fff';
            createaabbbb.style.backgroundColor=aabbbb[i];
            createaabbbb.innerHTML=aabbbb[i];
            colorContainer.appendChild(createaabbbb);
        }
        for (var i=0;i<ababab.length;i++) {
            var createababab = document.createElement('div');
            createababab.style.width=80+'px';
            createababab.style.height=20+'px';
            createababab.style.position='relative';
            createababab.style.marginRight='8px';
            createababab.style.marginTop='4px';
            createababab.style.float='left';
            createababab.style.textAlign='center';
            createababab.style.color='#fff';
            createababab.style.backgroundColor=ababab[i];
            createababab.innerHTML=ababab[i];
            colorContainer.appendChild(createababab);
        }
        for (var i=0;i<abaaaa.length;i++) {
            var createabaaaa = document.createElement('div');
            createabaaaa.style.width=80+'px';
            createabaaaa.style.height=20+'px';
            createabaaaa.style.position='relative';
            createabaaaa.style.marginRight='8px';
            createabaaaa.style.marginTop='4px';
            createabaaaa.style.float='left';
            createabaaaa.style.textAlign='center';
            createabaaaa.style.color='#fff';
            createabaaaa.style.backgroundColor=abaaaa[i];
            createabaaaa.innerHTML=abaaaa[i];
            colorContainer.appendChild(createabaaaa);
        }
        for (var i=0;i<aabaaa.length;i++) {
            var createaabaaa = document.createElement('div');
            createaabaaa.style.width=80+'px';
            createaabaaa.style.height=20+'px';
            createaabaaa.style.position='relative';
            createaabaaa.style.marginRight='8px';
            createaabaaa.style.marginTop='4px';
            createaabaaa.style.float='left';
            createaabaaa.style.textAlign='center';
            createaabaaa.style.color='#fff';
            createaabaaa.style.backgroundColor=aabaaa[i];
            createaabaaa.innerHTML=aabaaa[i];
            colorContainer.appendChild(createaabaaa);
        }
        for (var i=0;i<aaabaa.length;i++) {
            var createaaabaa = document.createElement('div');
            createaaabaa.style.width=80+'px';
            createaaabaa.style.height=20+'px';
            createaaabaa.style.position='relative';
            createaaabaa.style.marginRight='8px';
            createaaabaa.style.marginTop='4px';
            createaaabaa.style.float='left';
            createaaabaa.style.textAlign='center';
            createaaabaa.style.color='#fff';
            createaaabaa.style.backgroundColor=aaabaa[i];
            createaaabaa.innerHTML=aaabaa[i];
            colorContainer.appendChild(createaaabaa);
        }
        for (var i=0;i<aabaab.length;i++) {
            var createaabaab = document.createElement('div');
            createaabaab.style.width=80+'px';
            createaabaab.style.height=20+'px';
            createaabaab.style.position='relative';
            createaabaab.style.marginRight='8px';
            createaabaab.style.marginTop='4px';
            createaabaab.style.float='left';
            createaabaab.style.textAlign='center';
            createaabaab.style.color='#fff';
            createaabaab.style.backgroundColor=aabaab[i];
            createaabaab.innerHTML=aabaab[i];
            colorContainer.appendChild(createaabaab);
        }
        for (var i=0;i<abbabb.length;i++) {
            var createabbabb = document.createElement('div');
            createabbabb.style.width=80+'px';
            createabbabb.style.height=20+'px';
            createabbabb.style.position='relative';
            createabbabb.style.marginRight='8px';
            createabbabb.style.marginTop='4px';
            createabbabb.style.float='left';
            createabbabb.style.textAlign='center';
            createabbabb.style.color='#fff';
            createabbabb.style.backgroundColor=abbabb[i];
            createabbabb.innerHTML=abbabb[i];
            colorContainer.appendChild(createabbabb);
        }
        for (var i=0;i<aabbcc.length;i++) {
            var createaabbcc = document.createElement('div');
            createaabbcc.style.width=80+'px';
            createaabbcc.style.height=20+'px';
            createaabbcc.style.position='relative';
            createaabbcc.style.marginRight='8px';
            createaabbcc.style.marginTop='4px';
            createaabbcc.style.float='left';
            createaabbcc.style.textAlign='center';
            createaabbcc.style.color='#fff';
            createaabbcc.style.backgroundColor=aabbcc[i];
            createaabbcc.innerHTML=aabbcc[i];
            colorContainer.appendChild(createaabbcc);
        }
        for (var i=0;i<abcabc.length;i++) {
            var createabcabc = document.createElement('div');
            createabcabc.style.width=80+'px';
            createabcabc.style.height=20+'px';
            createabcabc.style.position='relative';
            createabcabc.style.marginRight='8px';
            createabcabc.style.marginTop='4px';
            createabcabc.style.float='left';
            createabcabc.style.textAlign='center';
            createabcabc.style.color='#fff';
            createabcabc.style.backgroundColor=abcabc[i];
            createabcabc.innerHTML=abcabc[i];
            colorContainer.appendChild(createabcabc);
        }
        

            
        </script>
    </body>
</html>
使用谷歌浏览器解析<input type='color' value='auto'>的方式可以得到颜色拾色器，也可以通过ps获取颜色拾色器。但是，选择的颜色往往无规律，不便于程序员的记忆和使用。所以做了这么一个按照16进制的颜色表示法，依据规律而建的颜色表。
效果如下：
因为js函数使用我还不熟练，因此，本例代码依然可以进一步优化，我这里代码重复的地方很多。
posted @ 2018-11-04 12:14 tlfh 阅读(64) 评论(0) 收藏举报
刷新页面返回顶部
tlfh

颜色规律选择器

公告
