jQuery簡單調色器程式碼例項
本章節分享一段程式碼例項,它使用jquery實現了簡單的調色器功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #mycolor { width: 200px; height: 200px; border: 1px solid #000; background: #000; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { $('input').change(function () { var ranges = $('input'); var arr = []; for (var index = 0; index < ranges.length ; index++) { arr[index] = ranges[index].value; } $('#mycolor').css("background", "rgb(" + arr[0] + "," + arr[1] + "," + arr[2] + ")"); $('.show').text("rgb(" + arr[0] + "," + arr[1] + "," + arr[2] + ")"); }) }); </script> </head> <body> <div id="mycolor"></div> R(紅色)<input type="range" min="0" max="255" value="0" /><span></span><br /> G(綠色)<input type="range" min="0" max="255" value="0" /><span></span><br /> B(藍色)<input type="range" min="0" max="255" value="0" /><span></span><br /> <span class="show">rgb(0,0,0)</span> </body> </html>
相關文章
- jQuery表單驗證簡單程式碼例項jQuery
- jQuery鏈式呼叫簡單例項程式碼jQuery單例
- jquery自定義事件簡單例項程式碼jQuery事件單例
- jQuery實現的簡單投票簡單程式碼例項jQuery
- jQuery 隔行變色效果程式碼例項jQuery
- jQuery隔行變色效果程式碼例項jQuery
- jquery簡單計算機功能程式碼例項jQuery計算機
- jquery隨機瀑布流簡單程式碼例項jQuery隨機
- jQuery table表格隔行換色程式碼例項jQuery
- jquery圖片預載入簡單程式碼例項jQuery
- jQuery實現的隔行變色程式碼例項jQuery
- jQuery實現的自動播放簡單程式碼例項jQuery
- css 兄弟選擇器簡單程式碼例項CSS
- jQuery is() 程式碼例項jQuery
- jQuery調整li元素順序程式碼例項jQuery
- jQuery清除表單資料程式碼例項jQuery
- jQuery 省市級聯選單程式碼例項jQuery
- js選項卡簡單程式碼例項JS
- jQuery實現的生成隨機密碼程式碼例項簡單介紹jQuery隨機密碼
- js簡單富文字編輯器效果程式碼例項JS
- js map集合簡單程式碼例項JS
- javascript閉包簡單程式碼例項JavaScript
- javascript作用域簡單例項程式碼JavaScript單例
- JSON簡單格式程式碼例項JSON
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- jQuery美化select下拉選單程式碼例項jQuery
- jQuery操作select下拉選單程式碼例項jQuery
- jQuery登錄檔單驗證程式碼例項jQuery
- jQuery選項卡例項程式碼jQuery
- jQuery遍歷讀取json格式資料簡單程式碼例項jQueryJSON
- jQuery實現的動畫簡單例項jQuery動畫單例
- jQuery操作cookie程式碼例項jQueryCookie
- jQuery 動畫效果程式碼例項jQuery動畫
- jQuery事件冒泡程式碼例項jQuery事件
- prototype原型繼承簡單程式碼例項原型繼承
- js簡單日曆效果程式碼例項JS
- js簡單的留言功能程式碼例項JS
- js簡單摺紙效果程式碼例項JS