JS實(shí)現(xiàn)的系統(tǒng)調(diào)色板完整實(shí)例
更新時(shí)間：2016年12月21日 10:55:40 作者：蝸牛0912
這篇文章主要介紹了JS實(shí)現(xiàn)的系統(tǒng)調(diào)色板,結(jié)合完整實(shí)例形式分析了js實(shí)現(xiàn)調(diào)色板效果的具體步驟與實(shí)現(xiàn)技巧,涉及js數(shù)值計(jì)算與頁(yè)面元素操作的方法,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)的系統(tǒng)調(diào)色板。分享給大家供大家參考，具體如下：
運(yùn)行效果圖如下：
整體頁(yè)面代碼：
<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顏色查詢對(duì)照表_顏色代碼表_顏色的英文名稱大全：
http://tools.jb51.net/color/jPicker
在線網(wǎng)頁(yè)調(diào)色板工具：
http://tools.jb51.net/color/color_picker
在線顏色選擇器工具/RGB顏色查詢對(duì)照表：
http://tools.jb51.net/color/colorpicker
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 用JavaScript仿PS里的羽化效果代碼
- JS批量修改PS中圖層名稱的方法
- JS實(shí)現(xiàn)的在線調(diào)色板實(shí)例(附demo源碼下載)
- JS 網(wǎng)頁(yè)安全色調(diào)色板 DW風(fēng)格
- JavaScript使用Range調(diào)色及透明度實(shí)例
- 基于JavaScript實(shí)現(xiàn)隨機(jī)顏色輸入框
- JavaScript隨機(jī)生成顏色的方法
- JavaScript制作顏色反轉(zhuǎn)小游戲
- 漂亮! js實(shí)現(xiàn)顏色漸變效果
- JavaScript獲取圖片像素顏色并轉(zhuǎn)換為box-shadow顯示
- js實(shí)現(xiàn)按鈕顏色漸變動(dòng)畫(huà)效果
- js實(shí)現(xiàn)的簡(jiǎn)單radio背景顏色選擇器代碼
- js實(shí)現(xiàn)的在線調(diào)色板功能完整實(shí)例
相關(guān)文章
JavaScript中windows.open()、windows.close()方法詳解
這篇文章主要介紹了JavaScript中windows.open()、windows.close()方法詳解 的相關(guān)資料,需要的朋友可以參考下2016-07-07
js寫(xiě)一個(gè)彈出層并鎖屏效果實(shí)現(xiàn)代碼
js實(shí)現(xiàn)一個(gè)彈出層并鎖屏效果是每一網(wǎng)友所期望的效果，于是搜集整理一番，把代碼曬出來(lái)和大家分享2012-12-12
淺談js中的延遲執(zhí)行和定時(shí)執(zhí)行
下面小編就為大家?guī)?lái)一篇淺談js中的延遲執(zhí)行和定時(shí)執(zhí)行。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
JavaScript實(shí)現(xiàn)按照指定長(zhǎng)度為數(shù)字前面補(bǔ)零輸出的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)按照指定長(zhǎng)度為數(shù)字前面補(bǔ)零輸出的方法,實(shí)例分析了javascript操作數(shù)字補(bǔ)零的技巧,需要的朋友可以參考下2015-03-03
使用js實(shí)現(xiàn)的導(dǎo)航欄懸停效果在IE上，滾動(dòng)滾動(dòng)條或者鼠標(biāo)滾輪的時(shí)候，導(dǎo)航欄會(huì)抖動(dòng);而在Chrome和FF上有沒(méi)有任何問(wèn)題2013-09-09
微信小程序 動(dòng)態(tài)修改頁(yè)面數(shù)據(jù)及參數(shù)傳遞過(guò)程詳解
這篇文章主要介紹了微信小程序 動(dòng)態(tài)修改頁(yè)面數(shù)據(jù)及參數(shù)傳遞過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了leaflet基本使用示例教程,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
JavaScript實(shí)現(xiàn)簡(jiǎn)單貪吃蛇效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單貪吃蛇效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JS正則驗(yàn)證多個(gè)郵箱完整實(shí)例【郵箱用分號(hào)隔開(kāi)】
這篇文章主要介紹了JS正則驗(yàn)證多個(gè)郵箱的方法,且郵箱字符串使用分號(hào)隔開(kāi),非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2017-04-04
WebGL學(xué)習(xí)教程之Three.js學(xué)習(xí)筆記(第一篇)
Three.js是一個(gè)js的開(kāi)源框架，它把webgl的所有東西都封裝好了，我們不再需要去了解webgl那些比較麻煩的細(xì)節(jié)，直接在此框架上進(jìn)行開(kāi)發(fā)，既方便，又快捷，而且很容易就能學(xué)習(xí),感興趣的朋友跟隨小編一起看看吧2019-04-04