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操作文本框readOnly
May 15 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
JS代码实现table数据分页效果
May 26 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
vue+elementUi图片上传组件使用详解
Aug 20 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查看session内容的函数
2008/08/27 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
JavaScript修改注册表实例代码
2020/01/05 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Python之str操作方法(详解)
2017/06/19 Python
对Python中画图时候的线类型详解
2019/07/07 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
python str字符串转uuid实例
2020/03/03 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
中文专业求职信
2014/06/20 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
2015年环保局工作总结
2015/05/22 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
委托书范本格式
2019/04/18 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server