返回首页

温馨提示：本站文章标题使用的字体是《微软雅黑》点击下载这个字体.

顶一下

1 次

js颜色选择器

来源：本站原创编辑：佚名时间：2008年11月8日浏览：

<!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=utf-8" />
<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>";

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>

本代码由<a href="http://www.web265.com" target="_blank">站长素材网(http://www.web265.com)</a>整理发布

运行代码
复制代码
另存代码
收藏本页

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇：百度POPUP效果

下一篇：uz公告效果（自动换行，无间隙滚动）

赞助商友情链接

站长常用工具

更多

返回首页

js颜色选择器

赞助商友情链接

站长常用工具

相关文章