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

Creating a color mixer showing the result of two combined colors

本文关键字：颜色 两种 显示 组合 结果 混合器 一个 创建      更新时间：2023-09-26

我正在制作一个有6种颜色的调色器。当你点击其中的两个时，它会显示颜色，如果你把两种颜色的油漆混合在一起。

我想知道如何使它，当你点击两个东西，它显示一个输出。

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
}

我使用JQuery XColor来进行颜色混合。

看这个小提琴:选择2个项目，点击"Get Mix"按钮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/(即加法，减法…等)

这就是你想要的吗?

试试这个:首先在你的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时，它调用javascript函数将所选颜色保存在一个变量中。现在，你可以插入你的颜色混合公式，并在resultdiv上设置结果颜色。

相关文章：