混色器(javascript)

时间:2014-02-05 08:59:13

标签: javascript html css colors

我制作了一张带背景颜色的简单表格。每个td都有一个输入类型的无线电。每个单选按钮都有自己的价值。该值是它所在的颜色。

Picture

这是HTML代码。

<input type="radio" name="radio2" value="#FF0000">
<input type="radio" name="radio2" value="#666666">
<input type="radio" name="radio2" value="#003399">

<input type="radio" name="radio3" value="#FF0000">
<input type="radio" name="radio3" value="#666666">
<input type="radio" name="radio3" value="#003399">

etc... 

我尝试通过onClick

获取点击按钮的值
<input type="radio" value="#FF0000" name="radio1" id="rot"
onClick="document.getElementById('write').value=(this.value)"

我现在要做的是将所有选定的颜色添加到一起并混合它们。至少我喜欢用div或其他东西打印出来。但我不知道如何将它们加在一起。我希望你们明白我在寻找什么。

谢谢:)

1 个答案:

答案 0 :(得分:1)

一种jQuery方法,用于打印单击的单选按钮的颜色值。

$('input').click(function(){
    alert($(this).val());
});

现在,您需要在点击时存储每种颜色,将其值从十六进制转换为十进制,然后将这些值一起添加。

这是一个关于在JavaScript中将hex转换为rgb的好的StackOverflow问题 -

RGB to Hex and Hex to RGB

假设您希望混合颜色出现在名为“mixedColour”的div中,您的JavaScript看起来就像这样 -

$(document).ready(function(){
    $('input').click(function(){
        var selectedColour = $(this).val();

        //This is where you'll need to add the colours together.

        $('mixedColour').css('background-color',selectedColour);
    });
});