JS 网页安全色调色板 DW风格

更新时间：2008年12月04日 01:16:50 作者：

利用JS做的一个网页安全色调色板希望大家用得上！

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2311"> <title>DW调色板</title> <script> var ColorHex=new Array('00','33','66','99','CC','FF') var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF') var current=null function intocolor() { var colorTable='' for (i=0;i<2;i++) { for (j=0;j<6;j++) { colorTable=colorTable+'<tr height=12>' colorTable=colorTable+'<td width=11 style="background-color:#000000">' if (i==0){ colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'} else{ colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">'} colorTable=colorTable+'<td width=11 style="background-color:#000000">' 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=253 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><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>' +'<td width="3"><td><input type="text" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td></tr></table></td></table>' +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" onmouseover="doOver()" onmouseout="doOut()" onclick="doclick()" style="cursor:hand;">' +colorTable+'</table>'; colorpanel.innerHTML=colorTable } function doOver() { if ((event.srcElement.tagName=="TD") && (current!=event.srcElement)) { if (current!=null){current.style.backgroundColor = current._background} event.srcElement._background = event.srcElement.style.backgroundColor DisColor.style.backgroundColor = event.srcElement.style.backgroundColor HexColor.value = event.srcElement.style.backgroundColor event.srcElement.style.backgroundColor = "white" current = event.srcElement } } function doOut() { if (current!=null) current.style.backgroundColor = current._background } function doclick(){ if (event.srcElement.tagName=="TD"){ alert("选取颜色: "+event.srcElement._background) return event.srcElement._background } } </script> </head> <body onload="intocolor()"> <div id="colorpanel" style="position: absolute;"> 　</div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

图片与JavaScript配合做出个性滚动条
如果你想定制出一个漂亮的滚动条的话,这个JS特效可能会适合你,不过代码稍嫌麻烦些,但效果真的不错,代码含有中文注释,学习也是不错的,希望朋友们喜欢.
2009-10-10
js 颜色选择器（兼容firefox）
js颜色选择器，改自网络，兼容firefox,需要的朋友，可以试下
2009-03-03
div scroll始终在最底部的实现代码
想要设定一个div始终scroll到它的最底部，可以用如下代码
2009-03-03
JS+CSS实现的一种交互体验表单页面
JavaScript+CSS实现精致的、符合标准的表单效果，鼠标点击输入框，立即会提示用户该输入框的填写要求，色彩搭配也极和谐，我喜欢。
2009-12-12
图片与文字半透明效果鼠标移上不透明
图片与文字结合的半透明效果，在正常状态下，一张图片的上面显示文字，为了区分背景，文字下方又重新布置了一个DIV
2009-10-10
CSS 直方图布局示例
利用CSS布局一个直方图，可能比较实用，主要是考验使用CSS布局的能力，看看效果吧。
2009-11-11
直接生成打开窗口代码，不必下载
用window.open实现打开窗口效果代码，主要用于信息的提示效果
2008-05-05
js实现的层变换效果
js实现的层变换效果...
2007-09-09
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
js实现的跟随鼠标移动的时钟效果，网上的很多代码都是错误，这里特别为大家整理个能用的。
2011-01-01
js可拖动的后台界面
不错的后台界面，方便大家以后做后台
2008-07-07

JS 网页安全色调色板 DW风格

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具