js颜色选择器代码[firefox不支持]- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js颜色选择器代码[firefox不支持]

Javascript: 用javascript实现的图片马赛克后显示并切换加文字功能; 通用的javascript　换行色换列色的小js; 滑动门,简洁,新手上路制作篇 (小鸽子系列); 文字模糊特效; javascript实现的又一个不错的滑动导航效果; css实现的图片模糊效果; javascript跟随鼠标x,y坐标移动的字效果; js实现用于建立新的一行且增加的四个文本框为空的且被禁用; XML+XSL 与 HTML 两种方案的结合; javascript生成/解析dom的CDATA类型的字段的代码; IE与FireFox的兼容性问题分析; 关于脚本操作文本域的问题; 刷新时清空文本框内容的js代码; 又一个不错的js浮动广告代码; 网页背景渐变效果代码; 非常漂亮的让背景如此暗淡（一种弹出提示信息时页面背景色调改变的方法）; [原创]jser必看的破解javascript各种加密的反向思维方法; eval(function(p,a,c,k,e,d)系列解密javascript程序; 从sohu弄下来的flash中展示图片的代码; 漂亮的widgets，支持换肤和后期开发新皮肤（2007-4-27已更新1.7alpha）

No. « ‹ 63 64 65 66 › »

技术文章搜索

关键字

Javascript 中的 js颜色选择器代码[firefox不支持]

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 175 ::

收藏到网摘: n/a

js 目录列举函数 js wmp操作代码小结(音乐连播功能)

非常不错的，颜色选择效果代码最简单的，在body区域加入：

复制代码代码如下:

<OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0"></OBJECT> 

调用的JS：

复制代码代码如下:

<script type="text/javascript"> 
var tempColor = "0099cc"; 
function picColor(){ 
var Hcolor = document.getElementById("dlgHelper").ChooseColorDlg(tempColor).toString(16); 
//with(event.srcElement){ 
//value = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor; 
//style.backgroundColor = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor; 
var newColor = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor; 
if(newColor.toString().substring(0,1) != "#"){ 
newColor = "#" + newColor; 
} 
alert(newColor); 
} 
// tempColor = Hcolor; 
// window.alert(tempColor); 
//} 
</script>

或者直接使用这个：

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>颜色选择器</title>
</head>
<BODY>
<script language="javascript">
document.write("<OBJECT id=\"dlgHelper\" CLASSID=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\" width=\"0px\" height=\"0px\"></OBJECT>");
var ocolorPopup = window.createPopup();
var ecolorPopup=null;
function colordialogmouseout(obj){
obj.style.borderColor="";
obj.bgColor="";
}
function colordialogmouseover(obj){
obj.style.borderColor="#0A66EE";
obj.bgColor="#EEEEEE";
}
function colordialogmousedown(color){
ecolorPopup.value=color;
//document.body.bgColor=color;
ocolorPopup.document.body.blur();
}
function colordialogmore(){
var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value);
sColor = sColor.toString(16);
if (sColor.length < 6) {
var sTempString = "000000".substring(0,6-sColor.length);
sColor = sTempString.concat(sColor);
}
ecolorPopup.value="#"+sColor.toUpperCase();
//document.body.bgColor="#"+sColor.toUpperCase();
ocolorPopup.document.body.blur();
}
function colordialog(){
var e=event.srcElement;
e.onkeyup=colordialog;
ecolorPopup=e;
var ocbody;
var oPopBody = ocolorPopup.document.body;
var colorlist=new Array(40);
oPopBody.style.backgroundColor = "#f9f8f7";
oPopBody.style.border = "solid #999999 1px";
oPopBody.style.fontSize = "12px";
colorlist[0]="#000000"; colorlist[1]="#993300"; colorlist[2]="#333300"; colorlist[3]="#003300";
colorlist[4]="#003366"; colorlist[5]="#000080"; colorlist[6]="#333399"; colorlist[7]="#333333";
colorlist[8]="#800000"; colorlist[9]="#FF6600"; colorlist[10]="#808000";colorlist[11]="#008000";
colorlist[12]="#008080";colorlist[13]="#0000FF";colorlist[14]="#666699";colorlist[15]="#808080";
colorlist[16]="#FF0000";colorlist[17]="#FF9900";colorlist[18]="#99CC00";colorlist[19]="#339966";
colorlist[20]="#33CCCC";colorlist[21]="#3366FF";colorlist[22]="#800080";colorlist[23]="#999999";
colorlist[24]="#FF00FF";colorlist[25]="#FFCC00";colorlist[26]="#FFFF00";colorlist[27]="#00FF00";
colorlist[28]="#00FFFF";colorlist[29]="#00CCFF";colorlist[30]="#993366";colorlist[31]="#CCCCCC";
colorlist[32]="#FF99CC";colorlist[33]="#FFCC99";colorlist[34]="#FFFF99";colorlist[35]="#CCFFCC";
colorlist[36]="#CCFFFF";colorlist[37]="#99CCFF";colorlist[38]="#CC99FF";colorlist[39]="#FFFFFF";
ocbody = "";
ocbody += "<table CELLPADDING=0 CELLSPACING=3>";
ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+e.value+"\"><tr><td></td></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px;\" align=\"center\">当前颜色</td></tr>";
for(var i=0;i<colorlist.length;i++){
if(i%8==0)
ocbody += "<tr>";
ocbody += "<td width=\"14\" height=\"16\" style=\"border:1px solid;\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" onMouseDown=\"parent.colordialogmousedown('"+colorlist[i]+"')\" align=\"center\" valign=\"middle\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+colorlist[i]+"\"><tr><td></td></tr></table></td>";
if(i%8==7)
ocbody += "</tr>";
}
ocbody += "<tr><td align=\"center\" height=\"22\" colspan=\"8\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" style=\"border:1px solid;font-size:12px;cursor:default;\" onMouseDown=\"parent.colordialogmore()\">其它颜色...</td></tr>";
ocbody += "</table>";
//www.ruanchen.com 软晨学习网
oPopBody.innerHTML=ocbody;
ocolorPopup.show(e.offsetLeft, e.offsetTop+e.offsetHeight, 158, 147, document.body);
}
//-->
</script>
选择颜色：<input name="sel1" type="text" onfocus="colordialog()" />
</BODY>
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

js 目录列举函数 js wmp操作代码小结(音乐连播功能)

Javascript 中的 js颜色选择器代码[firefox不支持]

评论 (0) All