JavaScript製作HTML Palette調色盤

tags: jQuery JavaScript jQuery Mobile

---

function set_color(){
    var red = $("#red").val();
    var green = $("#green").val();
    var blue = $("#blue").val();
    var color = "RGB("+red+","+green+","+blue+")";
    $("div").css("background-color",color);
};

<!-- palette page -->
<div data-role="page" id="palette">
    <!-- HEADER -->
    <div data-role="header" data-theme="b">
        <h1>Palette調色盤</h1>
    </div><!-- /HEADER -->
    <!-- CONTENT -->
    <div role="main" class="ui-content">
        <div data-role="fieldcontain">
            <label for="red">紅色</label>
            <input type="range" name="red" id="red" min="0" max="255" step="1" value="0" onchange="set_color();">
        </div>
        <div data-role="fieldcontain">
            <label for="green">綠色</label>
            <input type="range" name="green" id="green" min="0" max="255" step="1" value="0" onchange="set_color();">
        </div>
        <div data-role="fieldcontain">
            <label for="blue">藍色</label>
            <input type="range" name="blue" id="blue" min="0" max="255" step="1" value="0" onchange="set_color();">
        </div>
    </div><!-- /CONTENT -->
</div><!-- /HOME page -->

---