0

我目前正在为学校制作一个简单的颜色选择器。嗯，它应该很简单，但是我的 Javascript 编程真的很糟糕。它包含一个带有名称的数组和一个带有代码的数组。代码将仅包含 00、33、66、99、ff、cc，并且代码只有 6 个字符，如你们中的一些人所知。通过一个循环，我设法在屏幕上打印所有内容，但现在我想让背景颜色与我点击的颜色相同。我想要在文本框中单击的那个的代码。

所以这是我的代码：DHTML with jQuery: Opdracht 4 

    <script type="text/javascript">

        function showPicker(source) {
            var hex = new Array('00', '33', '66','99','CC','FF');
            var colorNames = new Array(
                   "black",         // #000000
                   "weak blue",         // #000033
                   "obsure dull blue",      // #000066
                   "dark faded blue",       // #000099

              );

             var count = 0;
             document.writeln('<table width="1200" height="600">');
             for(var x in hex) {
                 document.writeln('<tr>');
                 for(var y in hex) {
                     for(var z in hex) {
                         var color = hex[x] + "" + hex[y] + "" + hex[z];
                         document.writeln('<td bgcolor="#'+color+'" title="#'+color + ' ' + colorNames[count] + '" onclick="'+source+' (\''+color+'\',\''+colorNames[count]+'\')"></td>');
                         count++;

                    }
                 }
                 document.writeln('</tr>');
             }
             document.writeln('</table>');               
        }

        showPicker('showFontColor');
    </script>



</head>

<body>
    <input type="text" id="color"/>
</body>
</html>

我在 onclick 按钮中尝试了一行，但我意识到这行不通。你们有什么建议吗？对不起，如果它看起来有点凌乱，正如我所说的，我是 javascript 中的一个真正的小人物。

编辑：

工作代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>DHTML with jQuery: Opdracht 4</title>
     <link href="style.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">

        function changeBg(color){

            var currentColor = $('#printColor').val();
                $('#input').css('background', currentColor);
        }
        function printColor(color) {
                $('#printColor').val(color);

                $("#input").on("click", function() {
                    $(this).css("background", "printColor");
                });
            }           

        function changeFG() {
            var currentColor = $('#printColor').val();
                $('#input').css('color', currentColor);
        }   


            function showPicker(source) {
                var hex = new Array('00', '33',     '66','99','CC','FF');
                var colorNames = new Array(
                       "black",         // #000000
                       "weak blue",         // #000033
                       "obsure dull blue",      // #000066
  );

                 var count = 0;
                 document.writeln('<table width="800"      height="300">');
                 for(var x in hex) {
                     document.writeln('<tr>');
                     for(var y in hex) {
                         for(var z in hex) {
                             var color = hex[x] + "" +  hex[y] + "" + hex[z];
                             document.writeln('<td  bgcolor="#' + color + '" title="#' + color + ' ' + colorNames[count] + '"  onclick="javascript:printColor(\'#'+color+'\')" ' + source + '(\'' + color + '\',\'' +    colorNames[count] + '\')"></td>');

                             count++;
                             var source =     function(color){
                                 document.body.style.background = "#" + color;
                             }
                        }
                     }
                     document.writeln('</tr>');
                 }
                 document.writeln('</table>');
            }

        showPicker('showFontColor');

    </script>



    </head>

    <body> 
    <div id="input">    
        <input type="text" id="printColor" name="printColor" />
        Change <a href="#" onClick="javascript:changeBg()">Background</a> /         <a href="#" onClick="javascript:changeFG()">Foreground</a> color!
        <p> Lorem ipsum blablabla</p>
    </div>
</body>
    </html>
4

1 回答 1

0

在不对您的代码进行太多更改的情况下，我认为这就是您想要的。我只是将您的数组更改为一个对象，以便您可以将颜色的十六进制代码映射到名称并声明changeBg函数。只需填写其余的颜色。

<body>
<script type="text/javascript">

(function(){
    var colorNames = {
               "000000": "black",         
               "000033": "weak blue",         
               "000066": "obsure dull blue",      
               "000099": "dark faded blue"     
               //...rest of colors

    };

    window.changeBg = function(color){

        document.body.style.background = "#" + color;
        document.getElementById("color").value = colorNames[color];
    } 

     var showPicker = function(source) {
        var hex = new Array('00', '33', '66','99','CC','FF');


         var count = 0;
         document.writeln('<table width="1200" height="600">');
         for(var x in hex) {
             document.writeln('<tr>');
             for(var y in hex) {
                 for(var z in hex) {
                     var color = hex[x] + "" + hex[y] + "" + hex[z];
                     document.writeln('<td bgcolor="#'+color+'" title="#'+color +'" onclick=changeBg(\''+color+'\')></td>');
                     count++;

                }
             }
             document.writeln('</tr>');
         }
         document.writeln('</table>');               
    }



    showPicker();

    })();

</script>




<input type="text" id="color" readonly = true/>
</body>
于 2013-11-05T17:51:38.200 回答