久久久亚洲精品无码,中文精品无码中文字幕无码专区 ,精品久久久中文字幕人妻一区

【一、項目背景】

現實生活中，我們經常會遇到配色的問題，這個時候去百度一下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、點擊運行。