脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS字体选色板

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

 更新时间：2013年11月20日 15:32:01   作者：  
这篇文章主要介绍了JS实现字体选色板实例代码，有需要的朋友可以参考一下

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

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

复制代码 代码如下:

<!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方法即可。

您可能感兴趣的文章:

相关文章

  • JS数字千分位格式化实现方法总结

    JS数字千分位格式化实现方法总结

    这篇文章主要介绍了JS数字千分位格式化实现方法,结合实例形式总结分析了JS实现数字千分位格式化的常用技巧,包括字符串的分割、拼接、遍历及正则操作等相关实现技巧,需要的朋友可以参考下
    2016-12-12
  • 小程序实现筛子抽奖

    小程序实现筛子抽奖

    这篇文章主要为大家详细介绍了小程序实现筛子抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • JavaScript实现获取本机IP地址

    JavaScript实现获取本机IP地址

    这篇文章主要介绍了JavaScript实现获取本机IP地址方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • JS实现单击输入框弹出选择框效果完整实例

    JS实现单击输入框弹出选择框效果完整实例

    这篇文章主要介绍了JS实现单击输入框弹出选择框效果的方法,涉及JavaScript响应鼠标事件动态操作页面元素与相关属性的实现技巧,需要的朋友可以参考下
    2015-12-12
  • ionic2懒加载配置详解

    ionic2懒加载配置详解

    本篇文章主要介绍了ionic2懒加载配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 深入了解JavaScript 的 WebAssembly

    深入了解JavaScript 的 WebAssembly

    这篇文章主要介绍了深入了解JavaScript 的 WebAssembly,它是由 Google , Microsoft , Mozilla ， Apple 等几家大公司合作发起的一个关于 面向Web的通用二进制和文本格式 的项目。 ,需要的朋友可以参考下
    2019-06-06
  • 写出更好的JavaScript程序之undefined篇（中）

    写出更好的JavaScript程序之undefined篇（中）

    前一篇我介绍了几种广为使用的利用undefined这个概念值的办法，这一篇我会介绍一些不太常见的办法，其中还包括一个很巧妙的，我个人觉得很值得推广的办法。
    2009-11-11
  • JS前端首屏优化技巧

    JS前端首屏优化技巧

    这篇文章主要为大家介绍了JS前端首屏优化技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • js数组高阶函数之includes()方法总结

    js数组高阶函数之includes()方法总结

    JS的数组是一种特殊的对象,其特点是在值的列表中按照顺序存放值,在 JS中,数组是由中括号 [] 括起来的数值序列,本篇文章给大家介绍js数组高阶函数——includes()方法,感兴趣的朋友一起看看吧
    2023-12-12
  • 微信小程序开发之实现食堂点餐系统

    微信小程序开发之实现食堂点餐系统

    这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的食堂点餐系统，文中的示例代码讲解详细，感兴趣的小伙伴可以和小编一起学习一下
    2023-01-01

最新评论