JS实现字体选色板实例代码

哎，前段开发真心不容易。弄了一个小时，找找了各种素材，终于，字体选色板基本功能弄好了，用户界面设计技能亟待提升。先看效果

功能介绍：点击颜色按钮，弹出选色板，选中一个颜色，保存设置，隐藏选色板。实现源码如下：复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML标题颜色/标题meta http-equiv=' content-type ' content=' text/HTML；charset=utf-8 '脚本语言=' JavaScript ' src=' http :聊天。js ' type=' text/JavaScript '/script/head body style=' margin :8 px；SPAN style=' WHITE-space : pre '/SPAN！-此处省略无关代码-TD col span=12 align=left style=' word-break : break-all '输入名称=' FontColor '类型=' button '值='颜色onclick=' color open(event)' id=' FontColor '/！-此处省略无关代码-脚本类型='text/javascript '语言='javascript '！- var ColorHex=新数组(' 00 '，' 33 '，' 66 '，' 99 '，' CC '，' FF')var SpColorHex=新数组(' FF0000 '，' 0000FF '，' FFFF00 '，' 00FFFF '，' FF00FF ')var current=null function initcolor(){ getArgs()；//聊天。js init()；init()；var color table=' ' for(I=0；I 2；I){ for(j=0；j6；j){ color table=color table ' tr height=15 ' color table=color table ' TD width=15 style=' background-color : # 00000 ' ' if(I==0){ color table=color table ' TD width=15 style='光标指针：background-color : # ' color hex[j]color hex[j]color hex[j]' ' onclick=' doclick(这。风格。背景色)' ' } else { color table=color table ' TD width=15 style='光标：指针；background-color : # ' SpColorHex[j]' ' onclick=' doclick(这。风格。背景色)' ' }颜色表=颜色表' TD width=15 style='底色： # 000000 ' '为(k=0；k3；k){ for(l=0；l6；l){ color table=color table ' TD width=15 style='光标：指针；background-color : # ' color hex[k I * 3]color hex[l]color hex[j]' ' onclick=' doclick(这。风格。背景色)' ' } } } color table=' table border=' 0 '单元格间距=' 0 ' style=' border :1 px # 00000实线；边框-底部：无；边界崩溃：崩溃；宽度width :337 pxborder color=' 000000 ' ' ' tr height=20td colspan=21 bgcolor=# ffffff style=' font 336012 px Tahoma；填充-左侧：2像素；span style=' float : leftcolor : # 9999912/span " span style=' float : right；填充-右侧：3 px光标：指针指针；onclick='colorclose()'关闭/span' '/td/table ' '表格边框='1 '单元格间距='0 '单元格填充='0 '样式='边框-折叠：折叠'边框颜色=' 000000 '样式=' cursor : pointer " color table "/table；文件。getelementbyid(“颜色窗格”).innerHTML=colorTablevar current _ x=document。getelementbyid(' FontColor ').offsetLeftvar current _ y=文档。getelementbyid(' FontColor ').offsetTop//alert(current _ x '-' current _ y)文档。getelementbyid('颜色窗格')。风格。left=current _ x ' px文件。getelementbyid('颜色窗格')。风格。top=current _ y ' px}函数doclick(obj){//文档。getelementbyid(' FontColor ').value=objdocument。getelementbyid('颜色窗格')。风格。显示='无'；文件。getelementbyid(' msgbox ')。风格。颜色=obj//alert(obj)；//var chatArea=frames['chat'].文件/GetElementsByname(' ChatArea ')；//for(var I=0；I ChatArea . LengiI){//ChatArea[I]。风格。颜色=obj//} }函数color close(){文档。getelementbyid('颜色窗格')。风格。显示='无'；//alert(' ok ')；}函数color open(){文档。getelementbyid('颜色窗格')。风格。display=} window.onload=initcolor/脚本/正文/html调试的时候，自行修改doclick方法即可。