由JS实现的系统调色板的完整示例

本文阐述了用JS实现的系统调色板。分享给大家参考，如下：

运行渲染如下：

总页面代码：

html头元http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' titleDW调色板/title脚本类型=' text/JavaScript ' language=' JavaScript ' var color hex=new Array(' 00 '，' 33 '，' 66 '，' 99 '，' CC '，' FF ')var sp color hex=new Array(' FF 0000 '，' 00FF00 '，' FFFF00 '，' 00FFFF ')，var current=null函数getEvent(){ if(document。all){返回窗口。事件；//如果是ie } func=GetEvent . caller while(func！=null){ var arg 0=func。参数[0]；if(arg 0){ if((arg 0。构造函数==Event | | arg 0。构造函数==MouseEvent)| |(类型为(arg 0)=' object ' arg 0。preventdefault参数0。stopperpagation)){ return arg 0；} } func=func.caller}返回null}函数成color(){ var color table=' ' for(I=0；I2；i ) //循环2部分{ for(j=0；j6；j ) //循环6行{ color table=color table ' tr height=12 ' for(k=0；k3；k){ for(l=0；l6；l){ color table=color table ' TD width=11 style=' background-color : # ' color hex[k I * 3]color hex[l]color hex[j]' ' } } color table=' table width=217 border=' 0 '单元格间距=' 0 '单元格填充=' 0 ' style=' border 33601 px # 000000实线；边框-底部：无；边框-折叠：折叠边框颜色=' 000000 ' ' ' tr高度=30td colspan=21 bgcolor=# cccccccc ' '表格单元格填充=' 0 '单元格空间=' 1 '边框=' 0 '样式='边框-折叠trtd宽度=' 3 ' td当前色：/TDT输入类型=' text '名称='退色id='退色size=' 6 '禁用样式='边框：实心1px # 00000background-color : # FFFFFF/' TD ' ' TD width=' 3 ' t输入类型=' text ' name=' HexColor ' id=' HexColor ' size=' 7 ' style=' border : inset 1px；font-family : Arial值=' # FFFFFF '/TD/tr/table/TD/table ' '表格边框='1 '单元格间距='0 '单元格填充='0 '样式='边框-折叠：折叠'边框颜色=' 000000 '样式=' cursor : hand ' color table '/table '；彩色面板。innerhtml=color table }函数doOver(){ var evt=GetEvent()；定义变量元素=evt。srcelement | | evt。目标；定义变量退色=document.getElementById('退色');var HexColor=文档。GetElementByID(' HexColor ')；if ((element.tagName=='TD ')(当前！=元素)){ if(当前！=null){当前。风格。背景颜色=当前颜色._背景}元素_ background=元素。风格。背景颜色变色。风格。背景色=RGBtohex(元素。风格。背景色)十六进制颜色。value=RGBtohex(元素。风格。背景色)元素。风格。背景颜色='白色'当前=元素} }函数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；}返回(' #' r g b).toUpperCase()；}否则{返回aa} }函数doOut() { if (current！=null)当前。风格。背景颜色=当前颜色._背景；}函数doclick(){ var evt=GetEvent()；定义变量元素=evt。srcelement | | evt。目标；if(元素。标记名==' TD '){ var BG=rgbToHex(元素._背景);document.getElementById('橙色')。值=bg警报('选取颜色： ' BG)；返回血糖} }/script/head body on load=' intocolor()' div id=' color panel '/div table width=217 border=' 1 '单元格间距=' 0 '单元格填充=' 0 ' style=' border :1 px # 000000 solid；边框-底部：无；边框-折叠：折叠'边框颜色=' 000000 ' tr高度=30 TD colspan=21 bgcolor=# cccccccc table单元格填充=' 0 '单元格空间=' 1 '边框=' 0 ' style='边框-折叠：折叠' tr TD所选色：/TD TD输入id=' orange ' type=' text ' value=' size=' 20 '/TD/tr/table/TD/tr/table/body/html PS:这里再为大家推荐几款本站的相关在线工具：

在线RGB、HEX颜色代码生成器：http://工具。JB 51。网络/颜色/RGB _ color _ generator

RGB颜色查询对照表_颜色码表_英文颜色名称：http://tools.jb51.net/color/jPicker

在线网络调色板工具：http://tools.jb51.net/color/color_picker

在线颜色选择器工具/RGB颜色查询对照表：http://tools.jb51.net/color/colorpicker

关于JavaScript的更多信息，请参考本网站的主题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。