程序博客网 > 装修设计软件哪个好

JS实现字体选色板

来源：互联网 发布：装修设计软件哪个好 编辑：程序博客网 时间：2024/05/20 05:30

弄了1个小时，找了各种素材，终于，字体选色板基本功能弄好了，UI设计技能亟待提升。先看效果：


功能介绍：点击颜色按钮，弹出选色板，选中一个颜色，保存设置，隐藏选色板。。。实现源码如下：

[html] view plaincopyprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3. <head>  
  4. <title>color</title>  
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  6.   
  7. <script language="javascript" src="chat.js" type="text/javascript"></script>  
  8.   
  9.   
  10. </head>  
  11. <body style="margin:8px;">  
  12. <SPAN style="WHITE-SPACE: pre"> </SPAN><!--此处省略无关代码-->  
  13.           
  14.                 <td colspan=12 align=left style="word-break:break-all"><input  
  15.                     name="fontColor" type="button" value="颜色"  
  16.                     onclick="coloropen(event)" id="fontColor" />  
  17.     <!--此处省略无关代码-->                 
  18.   
  19.     <script type="text/javascript" language="javascript">  
  20.     <!--  
  21.         var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF')  
  22.         var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00',  
  23.                 '00FFFF', 'FF00FF')  
  24.         var current = null  
  25.         function initcolor() {  
  26.             getArgs();  
  27.   
  28.             //chat.js init();  
  29.             init();  
  30.   
  31.             var colorTable = ''  
  32.             for (i = 0; i < 2; i++) {  
  33.                 for (j = 0; j < 6; j++) {  
  34.                     colorTable = colorTable + '<tr height=15>'  
  35.                     colorTable = colorTable  
  36.                             + '<td width=15 style="background-color:#000000">'  
  37.                     if (i == 0) {  
  38.                         colorTable = colorTable  
  39.                                 + '<td width=15 style="cursor:pointer;background-color:#'  
  40.                                 + ColorHex[j]  
  41.                                 + ColorHex[j]  
  42.                                 + ColorHex[j]  
  43.                                 + '" onclick="doclick(this.style.backgroundColor)">'  
  44.                     } else {  
  45.                         colorTable = colorTable  
  46.                                 + '<td width=15 style="cursor:pointer;background-color:#'  
  47.                                 + SpColorHex[j]  
  48.                                 + '" onclick="doclick(this.style.backgroundColor)">'  
  49.                     }  
  50.                     colorTable = colorTable  
  51.                             + '<td width=15 style="background-color:#000000">'  
  52.                     for (k = 0; k < 3; k++) {  
  53.                         for (l = 0; l < 6; l++) {  
  54.                             colorTable = colorTable  
  55.                                     + '<td width=15 style="cursor:pointer;background-color:#'  
  56.                                     + ColorHex[k + i * 3]  
  57.                                     + ColorHex[l]  
  58.                                     + ColorHex[j]  
  59.                                     + '" onclick="doclick(this.style.backgroundColor)">'  
  60.                         }  
  61.                     }  
  62.                 }  
  63.             }  
  64.             colorTable = '<table border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:337px;" bordercolor="000000">'  
  65.                     + '<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">'  
  66.                     + '<span style="float:left;color:#999999;">12</span>'  
  67.                     + '<span style="float:right;padding-right:3px;cursor:pointer;" onclick="colorclose()">×关闭</span>'  
  68.                     + '</td></table>'  
  69.                     + '<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">'  
  70.                     + colorTable + '</table>';  
  71.             document.getElementById("colorpane").innerHTML = colorTable;  
  72.             var current_x = document.getElementById("fontColor").offsetLeft;  
  73.             var current_y = document.getElementById("fontColor").offsetTop;  
  74.             //alert(current_x + "-" + current_y)   
  75.             document.getElementById("colorpane").style.left = current_x + "px";  
  76.             document.getElementById("colorpane").style.top = current_y + "px";  
  77.         }  
  78.         function doclick(obj) {  
  79.             //document.getElementById("fontColor").value = obj;  
  80.             document.getElementById("colorpane").style.display = "none";  
  81.             document.getElementById('msgbox').style.color = obj;  
  82.             //alert(obj);  
  83.             //var chatArea = frames["chat"].document  
  84.                 //  .getElementsByName('chatArea');  
  85.             //for ( var i = 0; i < chatArea.length; i++) {  
  86.             //  chatArea[i].style.color = obj;  
  87.             //}  
  88.         }  
  89.         function colorclose() {  
  90.             document.getElementById("colorpane").style.display = "none";  
  91.             //alert("ok");   
  92.         }  
  93.         function coloropen() {  
  94.             document.getElementById("colorpane").style.display = "";  
  95.         }  
  96.         window.onload = initcolor;  
  97.     </script>  
  98.   
  99.   
  100.   
  101. </body>  
  102. </html>  

调试的时候，自行修改doclick方法即可。
装修设计软件哪个好 装修设计软件哪个好
原创粉丝点击
热门IT博客
简谱转成五线谱软件简谱转成五线谱软件
淘宝微商的货一样吗淘宝微商的货一样吗
环保部环境监测数据
五层网络体系结构
php ci restful
pc游戏编程 人机博弈
js设置select id设置值
通达数据库管理软件
linux下安装jdk教程
ug数控车编程视频教程
sew变频器软件下载
sqlplus导入sql文件
京津冀 知乎
招网络主播
淘宝网卖家服务中心
淘宝刚开店怎么运营
如果马谡不失街亭 知乎
手机数据恢复软件免费
js的设计模式 知乎
亚马逊销售员提成算法
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 玉龙雪山的诗 玉龙钢管有限公司 玉龙雪山植被 12月 玉龙雪山 一米阳光 玉龙雪山 玉龙雪山温度多少 穷游玉龙雪山 玉龙滑雪场门票 玉龙雪山的故事 玉龙雪山下的湖 石卡雪山和玉龙雪山 玉龙雪山蓝月谷海拔 玉龙雪山山顶气温 玉龙旅游股份有限公司 玉龙雪山景点海拔 玉龙雪山和石卡雪山 玉龙苑房屋出售 玉龙雪山常年积雪吗 玉龙雪山旅游图片 束河古镇到玉龙雪山怎么走 玉龙观音的养殖方法 关于玉龙雪山的歌 玉龙雪山蓝月谷图片 601028股票 601028 芳芳和罗志强和邓玉龙 玊 鸭玊3 玊怎么读 王 王的 脚王 踢王 鞋王 兔王 僵王 领王 灯王 锯王 为王 老王诊所

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里