【一、項目背景】
現實生活中，我們經常會遇到配色的問題，這個時候去百度一下RGB表。而RGB表隻提供相對于的顔色的RGB值而沒有可以驗證的子產品。
我們可以通過 jquery mobile去設計顔色的拾取器，得到我們想要的顔色值。同時可以驗證RGB表的顔色值。
【二、項目準備】
架構：jquery mobile
軟體：Dreamweaver
1、去官網 jQuerymobile.com 下載下傳jquery mobile。
2、在你的網頁中添加 jQuery Mobile
你可以通過以下幾種方式将jQuery Mobile添加到你的網頁中：
- 從 CDN 中加載 jQuery Mobile (推薦)。
- 從jQuerymobile.com 下載下傳 jQuery Mobile庫。
3、導入jQuery Mobile
<link href="jquery.mobile/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.4.5.js"></script> 【三、項目目标】
1、滑動滑塊将對應的顔色顯示在頁面。
2、實作輸入框，輸入對應的RBG值，将結果顯示在頁面上。
【四、項目實作】
1、建立三層div塊。（頭部，中部，尾部）。
<body>
<div data-role="page" ">
<div data-role="header">
<h1>拾色器</h1>
</div>
<div data-role="content" class="color"> </div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body> 頭部顯示文字，中部顔色顯示區域，尾部顯示滑動條。
2、建立一個表單（用三個input來分别存放RGB這三種顔色）。
<form>
<input name="red" id="red" min="0" max="255" value="0" type="range" " />
<input name="green" id="green" min="0" max="255" value="0" type="range"" />
<input name="blue" id="blue" min="0" max="255" value="0" type="range" />
</form> 3、添加CSS樣式
<style type="text/css">
.color {
height: 100%;
min-height: 400px;
}
</style>
4、添加 JS
1） 定義(set_color()方法)擷取相對于顔色的id屬性。
<script>
function set_color(){
var red = $("#red").val(); //擷取紅色數值
var green = $("#green").val(); //擷取綠色數值
var blue =$("#blue").val(); //擷取藍色數值
}
</script> 2）生成rgb表示的顔色字元串。
var color = "RGB("+red+","+green+","+blue+")"; //生成rgb表示的顔色字元串 3）設計内容框背景色。
$(".color").css("background-color",color); //設計内容框背景色 5、調用set_color()。
<input name="red" id="red" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="green" id="green" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="blue" id="blue" min="0" max="255" value="0" type="range" onchange="set_color();" /> 【五、效果展示】
1、點選運作。
2、點選f12進入開發者模式，點選藍色框框切換手機模式運作。
3、滑動任意一條滑動條。得到想要的顔色。
4、手動輸入RGB（0-255）值，得到相對應的顔色，如下圖所示。
【六、總結】
1、使更多的人去了解jQuery Mobile， jQuery可以快速找到文檔中的html元素，并對其進行操作，如隐藏、顯示、改變樣式...”。
2、本項目主要學習了input标簽（類型：滑動條）如何與js綁定，擷取事件響應。
3、顔色拾取器項目中，随機産生顔色這個難點進行了有效的分析，并提供解決方案。
4、按照操作步驟，自己嘗試去做。自己實作的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以了解的更加深刻。
5、需要本文源碼的小夥伴，背景回複“顔色拾取”四個字，即可擷取。
看完本文有收獲？請轉發分享給更多的人
IT共享之家
入群請在微信背景回複【入群】
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)