Question

我正在使用有6种颜色的混色器。当你点击其中的2个时，它会显示你混合两种颜色的颜色并将它们放在一起时的颜色。

我想知道如何制作它，以便当你点击两件事时它会显示一个输出。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Color Mixer</title>
  </head>
  <body>
    <div id="greendiv"></div>
    <div id="bluediv"></div>
    <div id="yellowdiv"></div>
    <div id="reddiv"></div>
    <div id="purplediv"></div>
    <div id="orangediv"></div>
    <p id="separator">------------------------------------------
    </body>
</html>

和CSS

#greendiv {
  background-color:green;
  width: 100px;
  height: 200px;
    margin-left: 360px;
}
#bluediv {
  background-color:blue;
  width: 100px;
  height: 200px;
  margin-left: 120px;
  margin-top: -200px;
}
#yellowdiv {
  background-color:yellow;
  width: 100px;
  height: 200px;
  margin-left: 240px;
  margin-top: -200px;
}
#reddiv {
  background-color: #E42217;
  height: 200px;
  width: 100px;
  margin-top: -200px
}
#purplediv {
  background-color: purple;
  height: 200px;
  width: 100px;
  margin-left: 480px;
  margin-top: -200px;
}

#orangediv {
  background-color: orange;
  height: 200px;
  width: 100px;
  margin-left: 600px;
  margin-top: -200px;
}
#separator {
  font-size: 50px;
  color: #565051;
  margin-top: -15px
}

#reddiv:hover {
background-color: #C11B17
}

Answer 1

我使用JQuery XColor进行混色..

看到这个小提琴：选择2项并点击＆＃34; Get Mix＆＃34;按钮 http://jsfiddle.net/jFIT/X4Qgf/6/

function getMix() { var colors = $('.selected'); var col1 = rgb2hex($(colors[0]).css('background-color')); var col2 = rgb2hex($(colors[1]).css('background-color')); console.log(colors); var additiveColor = ($.xcolor.average(col1, col2).getHex()); console.log(col1 + ' AND ' + col2); console.log(' = ' + additiveColor); $('#result').css('background-color', additiveColor); }

这一行：

var additiveColor = ($.xcolor.average(col1, col2).getHex());

您可以通过将.average(更改为您想要记录的内容来使用多种不同的颜色计算：http://www.xarg.org/project/jquery-color-plugin-xcolor/（即加法，减法等）

这是你之后的事情吗？

Answer 2

试试这个：首先在CSS中添加3个条目

#color1div {
  background-color: black;
  height: 100px;
  width: 100px;
}

#color2div {
  background-color: black;
  height: 100px;
  width: 100px;
  margin-left: 120px;
}

#resultdiv {
  background-color: black;
  height: 100px;
  width: 100px;
  margin-left: 240px;
}

然后，像这样修改你的html页面：

<html>
  <head>
    <meta charset="utf-8">
    <title>Color Mixer</title>
    <script type="text/javascript">
      var nextColor = 'color1div';
      function selectColor(colorName)
      {
        //select color
        document.getElementById(nextColor).style.backgroundColor=colorName;
        //toggle color 1 and color 2
        if(nextColor == 'color1div')
          nextColor = 'color2div';
        else
          nextColor = 'color1div';
        //mix the colors
        var color1 = document.getElementById('color1div').style.backgroundColor;
        var color2 = document.getElementById('color2div').style.backgroundColor;
        //insert your color mixing formula here and set result
        //example:
        //var result = mix(color1, color2);
        //document.getElementById('resultdiv').style.backgroundColor = result;
      }
    </script>
  </head>
  <body>
    <div id="greendiv" onclick="javascript:selectColor('green')"></div>
    <div id="bluediv" onclick="javascript:selectColor('blue')"></div>
    <div id="yellowdiv" onclick="javascript:selectColor('yellow')"></div>
    <div id="reddiv" onclick="javascript:selectColor('red')"></div>
    <div id="purplediv" onclick="javascript:selectColor('purple')"></div>
    <div id="orangediv" onclick="javascript:selectColor('orange')"></div>
    <p id="separator">------------------------------------------
    <div id="color1div"/>
    <div id="color2div"/>
    <div id="resultdiv"/>
    </body>
</html>

单击颜色div时，它会调用javscript函数将所选颜色保存在变量中。现在，您可以插入颜色混合公式并在resultdiv上设置结果颜色。

创建一个颜色混合器，显示两种组合颜色的结果

2 个答案: