創建一個顯示兩種組合顏色結果的顏色混合器

我正在使用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>

和

#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 
}

來源

2014-03-26 Dude Its Max

請爲它創建一個小提琴，它將幫助答覆者。 'http：// jsfiddle.net /' –

在此工作感謝繼承人小提琴即時通訊工作：http://jsfiddle.net/jFIT/X4Qgf/1/ –

您是否有計算塗料如何混合的公式？ –

我使用jQuery XColor做混色的CSS ..

看到這個小提琴：選擇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/（即添加劑，減色等）

這是你以後？

來源

2014-03-26 13:20:07

試試這個：一是3個條目添加到您的CSS

#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上。

來源

2014-03-26 13:55:40 dave823

這是非常完美的非常感謝 –

創建一個顯示兩種組合顏色結果的顏色混合器

回答

相關問題