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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 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
php二分法在IP地址查询中的应用
2008/08/12 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
Python中的filter()函数的用法
2015/04/27 Python
Python装饰器用法实例总结
2018/05/26 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
优秀小学生家长评语
2014/01/30 职场文书
模具毕业生推荐信
2014/02/15 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
财产公证书
2014/04/10 职场文书
文秘个人求职信范文
2014/04/22 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
四群教育工作总结
2015/08/10 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript