Archive for 04月 18th, 2008

You are currently browsing the archives of 乱七八糟 .

javascript 字体颜色选择器

由于需要做个网站名称颜色由用户自己修改的功能，在网上找了下，好像就这个还可以，我没改，有时间封装下。
我还想字体样式，网上没找到，由于时间仅所以就放弃了，有时间看下编辑器的样式是怎么搞的，在扣出来。

  1. <HTML>
  2. <HEAD>
  3. <TITLE> Office 风格颜色选择器</TITLE>
  4. <META NAME="Generator" CONTENT="EditPlus">
  5. <META NAME="Author" CONTENT="">
  6. <META NAME="Keywords" CONTENT="">
  7. <META NAME="Description" CONTENT="">
  8. </HEAD>
  9.  
  10. <BODY>
  11. <script language=javascript>
  12. <!--
  13.  
  14. //注意:只有把<script>标签放在<body>标签内才可以正常使用“其它颜色”功能
  15.  
  16. document.write("<OBJECT id=\"dlgHelper\" CLASSID=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\" width=\"0px\" height=\"0px\"></OBJECT>");
  17. var ocolorPopup = window.createPopup();
  18. var ecolorPopup=null;
  19.  
  20. function colordialogmouseout(obj){
  21.     obj.style.borderColor="";
  22.     obj.bgColor="";
  23. }
  24.  
  25. function colordialogmouseover(obj){
  26.     obj.style.borderColor="#0A66EE";
  27.     obj.bgColor="#EEEEEE";
  28. }
  29.  
  30. function colordialogmousedown(color){
  31.     ecolorPopup.value=color;
  32.     //document.body.bgColor=color;
  33.     ocolorPopup.document.body.blur();
  34. }
  35.  
  36. function colordialogmore(){
  37.     var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value);
  38.     sColor = sColor.toString(16);
  39.     if (sColor.length < 6) {
  40.         var sTempString = "000000".substring(0,6-sColor.length);
  41.         sColor = sTempString.concat(sColor);
  42.     }
  43.     ecolorPopup.value="#"+sColor.toUpperCase();
  44.     //document.body.bgColor="#"+sColor.toUpperCase();
  45.     ocolorPopup.document.body.blur();
  46. }
  47.  
  48. function colordialog(){
  49.     var e=event.srcElement;
  50.     e.onkeyup=colordialog;
  51.     ecolorPopup=e;
  52.     var ocbody;
  53.     var oPopBody = ocolorPopup.document.body;
  54.     var colorlist=new Array(40);
  55.     oPopBody.style.backgroundColor = "#f9f8f7";
  56.     oPopBody.style.border = "solid #999999 1px";
  57.     oPopBody.style.fontSize = "12px";
  58.  
  59.     colorlist[0]="#000000";    colorlist[1]="#993300";    colorlist[2]="#333300";    colorlist[3]="#003300";
  60.     colorlist[4]="#003366";    colorlist[5]="#000080";    colorlist[6]="#333399";    colorlist[7]="#333333";
  61.  
  62.     colorlist[8]="#800000";    colorlist[9]="#FF6600";    colorlist[10]="#808000";colorlist[11]="#008000";
  63.     colorlist[12]="#008080";colorlist[13]="#0000FF";colorlist[14]="#666699";colorlist[15]="#808080";
  64.  
  65.     colorlist[16]="#FF0000";colorlist[17]="#FF9900";colorlist[18]="#99CC00";colorlist[19]="#339966";
  66.     colorlist[20]="#33CCCC";colorlist[21]="#3366FF";colorlist[22]="#800080";colorlist[23]="#999999";
  67.  
  68.     colorlist[24]="#FF00FF";colorlist[25]="#FFCC00";colorlist[26]="#FFFF00";colorlist[27]="#00FF00";
  69.     colorlist[28]="#00FFFF";colorlist[29]="#00CCFF";colorlist[30]="#993366";colorlist[31]="#CCCCCC";
  70.  
  71.     colorlist[32]="#FF99CC";colorlist[33]="#FFCC99";colorlist[34]="#FFFF99";colorlist[35]="#CCFFCC";
  72.     colorlist[36]="#CCFFFF";colorlist[37]="#99CCFF";colorlist[38]="#CC99FF";colorlist[39]="#FFFFFF";
  73.  
  74.     ocbody = "";
  75.     ocbody += "<table CELLPADDING=0 CELLSPACING=3>";
  76.     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>";
  77.     for(var i=0;i<colorlist.length;i++){
  78.         if(i%8==0)
  79.             ocbody += "<tr>";
  80.         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>";
  81.         if(i%8==7)
  82.             ocbody += "</tr>";
  83.     }
  84.     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>";
  85.     ocbody += "</table>";
  86.  
  87.     oPopBody.innerHTML=ocbody;
  88.     ocolorPopup.show(e.offsetLeft, e.offsetTop+e.offsetHeight, 158, 147, document.body);
  89. }
  90. //-->
  91. </script>
  92. 选择颜色：<input name="sel1" type="text" onFocus="colordialog()"></BODY>
  93. </HTML>

Tags:

Posted by shuck on Apr 18th 2008 | Filed in php技术 | 评论（0）