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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
JavaScript中的Window窗口对象
Jan 16 Javascript
JavaScript 常用函数库详解
Oct 21 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
JS eval代码快速解密实例解析
Apr 23 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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
C# Assembly类访问程序集信息
2009/06/13 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
Django自定义分页效果
2017/06/27 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
python的命名规则知识点总结
2019/10/04 Python
Django实现celery定时任务过程解析
2020/04/21 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
python3中数组逆序输出方法
2020/12/01 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
手机银行营销方案
2014/03/14 职场文书
中介业务员岗位职责
2014/04/09 职场文书
精神文明建设标语
2014/06/16 职场文书
2015新年寄语大全
2014/12/08 职场文书
担保书怎么写 ?
2019/04/22 职场文书