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需再刷新一下页面才能执行]

您可能感兴趣的文章:

CSS 渐变背景的6个演示代码
CSS渐变背景的六个示例，个人觉得这是非常实用的一个常用技巧，不使用任何图片实现Div背景渐变，而且兼容IE和FF2，以后想要类似的效果，可有的参考了。
2009-10-10
JavaScript 未知高度元素垂直居中实现代码
JavaScript未知高度元素的垂直居中代码，允许你在不知道外层元素高度的情况下，用Js强制其居中，虽然用了JavaScript有些麻烦，不过效果甚好，值得一试。
2009-12-12
背景，文字渐变（无闪屏）
背景，文字渐变（无闪屏）...
2007-02-02
JS控制按钮自动切换背景颜色(可暂停)
JS控制按钮自动切换背景颜色，可暂停并且方便获取当前背景颜色,需要的朋友可以参考下
2012-10-10
CSS Filter背景透明提示
使用CSS的Filter滤镜实现的小效果，鼠标悬停时激活本效果，是一个半透明的图片提示层，本代码演示了核心的实现方法，你可以举一返三，作出更强大的效果来。
2009-11-11
JS实现网页百叶窗效果
JS实现网页百叶窗特效代码，百叶窗JS代码，你预览一下效果就明白了，由上到下交叉切换的网页特效，像百叶窗关上的效果，百叶窗效果在各种编程代码里都有应用，确实是一个经典的效果
2013-03-03
类似GMAIL的Ajax信息反馈显示
类似GMAIL的Ajax信息反馈显示，大家可以测试下。也方便调用。
2010-02-02
斑马线效果代码
斑马线效果代码...
2007-03-03
仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]
比较不错的模仿3721的页面模块拖动效果代码
2008-09-09
JavaScript判断窗口是否最小化的代码(跨浏览器)
有些朋友需要判断页面是不是被最小化了，然后再进行相应的操作。
2010-08-08