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 相关文章推荐
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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使用codebase生成随机数
2014/03/25 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
python全栈开发语法总结
2020/11/22 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
新浪微博实习心得体会
2014/01/27 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
优乐美广告词
2014/03/14 职场文书
目标责任书范本
2014/04/16 职场文书
教师思想工作总结2015
2015/05/13 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
Golang 入门 之url 包
2022/05/04 Golang