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


Posted in Javascript onNovember 20, 2013

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>color</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script language="javascript" src="chat.js" type="text/javascript"></script>

</head>
<body style="margin:8px;">
<SPAN style="WHITE-SPACE: pre"> </SPAN><!--此处省略无关代码-->
    <td colspan=12 align=left style="word-break:break-all"><input
     name="fontColor" type="button" value="颜色"
     onclick="coloropen(event)" id="fontColor" />
 <!--此处省略无关代码-->    
 <script type="text/javascript" language="javascript">
 <!--
  var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF')
  var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00',
    '00FFFF', 'FF00FF')
  var current = null
  function initcolor() {
   getArgs();
   //chat.js init();
   init();
   var colorTable = ''
   for (i = 0; i < 2; i++) {
    for (j = 0; j < 6; j++) {
     colorTable = colorTable + '<tr height=15>'
     colorTable = colorTable
       + '<td width=15 style="background-color:#000000">'
     if (i == 0) {
      colorTable = colorTable
        + '<td width=15 style="cursor:pointer;background-color:#'
        + ColorHex[j]
        + ColorHex[j]
        + ColorHex[j]
        + '" onclick="doclick(this.style.backgroundColor)">'
     } else {
      colorTable = colorTable
        + '<td width=15 style="cursor:pointer;background-color:#'
        + SpColorHex[j]
        + '" onclick="doclick(this.style.backgroundColor)">'
     }
     colorTable = colorTable
       + '<td width=15 style="background-color:#000000">'
     for (k = 0; k < 3; k++) {
      for (l = 0; l < 6; l++) {
       colorTable = colorTable
         + '<td width=15 style="cursor:pointer;background-color:#'
         + ColorHex[k + i * 3]
         + ColorHex[l]
         + ColorHex[j]
         + '" onclick="doclick(this.style.backgroundColor)">'
      }
     }
    }
   }
   colorTable = '<table border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:337px;" bordercolor="000000">'
     + '<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">'
     + '<span style="float:left;color:#999999;">12</span>'
     + '<span style="float:right;padding-right:3px;cursor:pointer;" onclick="colorclose()">×关闭</span>'
     + '</td></table>'
     + '<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">'
     + colorTable + '</table>';
   document.getElementById("colorpane").innerHTML = colorTable;
   var current_x = document.getElementById("fontColor").offsetLeft;
   var current_y = document.getElementById("fontColor").offsetTop;
   //alert(current_x + "-" + current_y) 
   document.getElementById("colorpane").style.left = current_x + "px";
   document.getElementById("colorpane").style.top = current_y + "px";
  }
  function doclick(obj) {
   //document.getElementById("fontColor").value = obj;
   document.getElementById("colorpane").style.display = "none";
   document.getElementById('msgbox').style.color = obj;
   //alert(obj);
   //var chatArea = frames["chat"].document
    // .getElementsByName('chatArea');
   //for ( var i = 0; i < chatArea.length; i++) {
   // chatArea[i].style.color = obj;
   //}
  }
  function colorclose() {
   document.getElementById("colorpane").style.display = "none";
   //alert("ok"); 
  }
  function coloropen() {
   document.getElementById("colorpane").style.display = "";
  }
  window.onload = initcolor;
 </script>
</body>
</html>

调试的时候,自行修改doclick方法即可。
Javascript 相关文章推荐
javascript调试说明
Jun 07 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
jquery实现树形二级菜单实例代码
Nov 20 #Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 #Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 #Javascript
js中的布尔运算符使用介绍
Nov 20 #Javascript
浅析hasOwnProperty方法的应用
Nov 20 #Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 #Javascript
JS画线(实例代码)
Nov 20 #Javascript
You might like
php读取文件内容的几种方法详解
2013/06/26 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
jQuery阻止同类型事件小结
2013/04/19 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
python对离散变量的one-hot编码方法
2018/07/11 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
吨的认识教学反思
2014/04/27 职场文书
解除劳动合同证明书
2014/09/26 职场文书
工程承包协议书
2014/10/20 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书