JS實現(xiàn)的系統(tǒng)調(diào)色板完整實例
更新時間：2016年12月21日 10:55:40 作者：蝸牛0912
這篇文章主要介紹了JS實現(xiàn)的系統(tǒng)調(diào)色板,結(jié)合完整實例形式分析了js實現(xiàn)調(diào)色板效果的具體步驟與實現(xiàn)技巧,涉及js數(shù)值計算與頁面元素操作的方法,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)的系統(tǒng)調(diào)色板。分享給大家供大家參考，具體如下：
運行效果圖如下：
整體頁面代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DW調(diào)色板</title>
<script type="text/javascript" language="javascript">
var ColorHex=new Array('00','33','66','99','CC','FF')
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current=null
function getEvent()
{
if(document.all)
{
return window.event;//如果是ie
}
func=getEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0];
if(arg0)
{
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)||(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
{
return arg0;
}
}
func=func.caller;
}
return null;
}
function intocolor()
{
var colorTable=''
for (i=0;i<2;i++) //循環(huán)2部分
{
for (j=0;j<6;j++) //循環(huán)6行
{
colorTable=colorTable+'<tr height=12>'
for (k=0;k<3;k++)
{
for (l=0;l<6;l++)
{
colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'
}
}
}
}
colorTable='<table width=217 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
+'<tr height=30><td colspan=21 bgcolor=#cccccc>'
+'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
+'<tr><td width="3"><td>當(dāng)前色:</td><td><input type="text" name="DisColor" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#FFFFFF"></td>'
+'<td width="3"><td><input type="text" name="HexColor" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#FFFFFF"></td></tr></table></td></table>'
+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:hand;">'
+colorTable+'</table>';
colorpanel.innerHTML=colorTable
}
function doOver() {
var evt=getEvent();
var element=evt.srcElement || evt.target;
var DisColor=document.getElementById("DisColor");
var HexColor=document.getElementById("HexColor");
if ((element.tagName=="TD") && (current!=element)) {
if (current!=null){
current.style.backgroundColor = current._background
}
element._background = element.style.backgroundColor
DisColor.style.backgroundColor = rgbToHex(element.style.backgroundColor)
HexColor.value = rgbToHex(element.style.backgroundColor)
element.style.backgroundColor = "white"
current = element
}
}
function rgbToHex(aa)
{
if(aa.indexOf("rgb") != -1)
{
aa=aa.replace("rgb(","")
aa=aa.replace(")","")
aa=aa.split(",")
r=parseInt(aa[0]);
g=parseInt(aa[1]);
b=parseInt(aa[2]);
r = r.toString(16);
if (r.length == 1) { r = '0' + r; }
g = g.toString(16);
if (g.length == 1) { g = '0' + g; }
b = b.toString(16);
if (b.length == 1) { b = '0' + b; }
return ("#" + r + g + b).toUpperCase();
}
else
{
return aa;
}
}
function doOut() {
if (current!=null) current.style.backgroundColor = current._background;
}
function doclick(){
var evt=getEvent();
var element=evt.srcElement || evt.target;
if (element.tagName=="TD"){
var bg=rgbToHex(element._background);
document.getElementById("orange").value=bg;
alert("選取顏色: "+bg);
return bg;
}
}
</script>
</head>
<body onload="intocolor()">
<div id="colorpanel">
</div>
<table width=217 border="1" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">
<tr height=30>
<td colspan=21 bgcolor=#cccccc>
<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">
<tr>
<td>所選色:</td>
<td><input id="orange" type="text" value="" size="20" /></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
PS：這里再為大家推薦幾款本站的相關(guān)在線工具：
在線RGB、HEX顏色代碼生成器：
http://tools.jb51.net/color/rgb_color_generator
RGB顏色查詢對照表_顏色代碼表_顏色的英文名稱大全：
http://tools.jb51.net/color/jPicker
在線網(wǎng)頁調(diào)色板工具：
http://tools.jb51.net/color/color_picker
在線顏色選擇器工具/RGB顏色查詢對照表：
http://tools.jb51.net/color/colorpicker
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
- 用JavaScript仿PS里的羽化效果代碼
- JS批量修改PS中圖層名稱的方法
- JS實現(xiàn)的在線調(diào)色板實例(附demo源碼下載)
- JS 網(wǎng)頁安全色調(diào)色板 DW風(fēng)格
- JavaScript使用Range調(diào)色及透明度實例
- 基于JavaScript實現(xiàn)隨機顏色輸入框
- JavaScript隨機生成顏色的方法
- JavaScript制作顏色反轉(zhuǎn)小游戲
- 漂亮! js實現(xiàn)顏色漸變效果
- JavaScript獲取圖片像素顏色并轉(zhuǎn)換為box-shadow顯示
- js實現(xiàn)按鈕顏色漸變動畫效果
- js實現(xiàn)的簡單radio背景顏色選擇器代碼
- js實現(xiàn)的在線調(diào)色板功能完整實例
相關(guān)文章
JavaScript中windows.open()、windows.close()方法詳解
這篇文章主要介紹了JavaScript中windows.open()、windows.close()方法詳解 的相關(guān)資料,需要的朋友可以參考下2016-07-07
js實現(xiàn)一個彈出層并鎖屏效果是每一網(wǎng)友所期望的效果，于是搜集整理一番，把代碼曬出來和大家分享2012-12-12
下面小編就為大家?guī)硪黄獪\談js中的延遲執(zhí)行和定時執(zhí)行。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JavaScript實現(xiàn)按照指定長度為數(shù)字前面補零輸出的方法
這篇文章主要介紹了JavaScript實現(xiàn)按照指定長度為數(shù)字前面補零輸出的方法,實例分析了javascript操作數(shù)字補零的技巧,需要的朋友可以參考下2015-03-03
使用js實現(xiàn)的導(dǎo)航欄懸停效果在IE上，滾動滾動條或者鼠標(biāo)滾輪的時候，導(dǎo)航欄會抖動;而在Chrome和FF上有沒有任何問題2013-09-09
微信小程序 動態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解
這篇文章主要介紹了微信小程序 動態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了leaflet基本使用示例教程,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單貪吃蛇效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了JS正則驗證多個郵箱的方法,且郵箱字符串使用分號隔開,非常簡單實用,需要的朋友可以參考下2017-04-04
WebGL學(xué)習(xí)教程之Three.js學(xué)習(xí)筆記(第一篇)
Three.js是一個js的開源框架，它把webgl的所有東西都封裝好了，我們不再需要去了解webgl那些比較麻煩的細(xì)節(jié)，直接在此框架上進行開發(fā)，既方便，又快捷，而且很容易就能學(xué)習(xí),感興趣的朋友跟隨小編一起看看吧2019-04-04