颜色设定(表格取色)

最新推荐文章于 2023-04-23 12:09:14 发布
最新推荐文章于 2023-04-23 12:09:14 发布
阅读量303 收藏 1
点赞数
分类专栏： JS等效 文章标签： javascript function border button table n2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanxcloveyou/article/details/1662995
版权

<HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>HBcms颜色选择器</TITLE>
<STYLE TYPE="text/css">
td {font-size: 9pt}
body {font-size: 10.8pt}
BUTTON {width:5em;font-size:12px;}
</STYLE>

<SCRIPT LANGUAGE=JavaScript>
/******************************************************************
// 程序名称：仿WINDOW的纯JS超酷颜色选择器HBcms改良版本
// 超酷效果：同window、office、各种网页编辑器的颜色选择器类似
// 改良内容：
// 1、增加传递颜色的功能。可以很方便的获取原来的颜色。
// 2、增加了双击颜色返回颜色代码并关闭窗口
// 3、色彩亮度颜色单击，返回颜色代码并关闭窗口
// 4、增加了使用帮助
// 5、增加了原颜色恢复按钮
// 6、增加了网页使用说明及getMyColor函数

// 最新改良版本可以在这里下载：http://www.hbcms.com
// 为让他人使用本程序避免产生疑惑，使用时请包含本说明文字，谢谢
//
// ########### 网页中使用说明：###########
//
// 1、先将本文件拷贝到您网站的目录，不需要做任何修改
// 范例如：根目录下位置：/script/select_color.html

// 2、在你的网页中加载getMyColor函数，范例如下：
function getMyColor(t)        {
  var old_color = ( t.value.indexOf('#') == 0 ) ? '?'+t.value.substr(1) : '?' + t.value;
  var color = showModalDialog("/script/select_color.html"+old_color+"", "", "dialogWidth:18.5em; dialogHeight:17.5em; status:0");
  if (color != null) {
          t.value = color;
          t.style.color = color;
  }  else {
          t.focus();
  }
  return true;
}
// *注:此函数为javascript函数,需要加在<script>中间

// 3、在颜色选择框中添加onclick事件调用getMyColor函数，范例如下：
// <form>...<input size="10" οnclick="getMyColor(this)" name="title_color" type="text" value="blue"  οnmοuseοver="this.style.color=this.value;" /> ...</form>

// 4、大功告成，请测试效果。如有异常，需检查：
// select_color.html文件路径是否正常,getMyColor是否处于form表单中

// ########### 版权说明：###########
// 本颜色选择器原始版本网络上盛为流传，此版本为HBcms改良版本
// 最新的HBcms改良版本可以在 http://www.hbcms.com/ 下载
// 本程序原始版权已无可考证，HBcms改良版本版权为GPL
// GPL简单来说即是 代码开源(可免费使用和引用,修改)
// 但不允许将修改后和衍生的代码做为闭源的商业软件发布和销售
//
// $Id: select_color.html,v 1.0 2006/07/26 10:59:30 aashley Exp $
//
******************************************************************/

var SelRGB = '';
var DrRGB = '';
var SelGRAY = '120';


var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');

// initColor() function added by Macro Zeng
// 2006-7-26   http://www.hbcms.com
function initColor()        {
        if ( location.search != '' && location.search != '?' )        {
                var old_color = location.search.substr(1);
                if ( /^[0-9A-Fa-f]{6}$/.test(old_color) ) {
                        SelRGB = '#'+old_color;
                        RGB.innerText = SelRGB;
                        EndColor();
                } else {
                        SelColor.value = old_color;
                        ShowColor.bgColor = SelColor.value;
                }
        }
} 


function ToHex(n)
{        var h, l;

        n = Math.round(n);
        l = n % 16;
        h = Math.floor((n / 16)) % 16;
        return (hexch[h] + hexch[l]);
}

function DoColor(c, l)
{ var r, g, b;

  r = '0x' + c.substring(1, 3);
  g = '0x' + c.substring(3, 5);
  b = '0x' + c.substring(5, 7);
 
  if(l > 120)
  {
    l = l - 120;

    r = (r * (120 - l) + 255 * l) / 120;
    g = (g * (120 - l) + 255 * l) / 120;
    b = (b * (120 - l) + 255 * l) / 120;
  }else
  {
    r = (r * l) / 120;
    g = (g * l) / 120;
    b = (b * l) / 120;
  }

  return '#' + ToHex(r) + ToHex(g) + ToHex(b);
}

function EndColor()
{ var i;

  if(DrRGB != SelRGB)
  {
    DrRGB = SelRGB;
    for(i = 0; i <= 30; i ++)
      GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8);
  }

        if ( RGB.innerText == '')        {
                initColor();
        } else {
          SelColor.value = DoColor(RGB.innerText, GRAY.innerText);
          ShowColor.bgColor = SelColor.value;
        }
}
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onclick>
  SelRGB = event.srcElement.bgColor;
  EndColor();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=ondblclick>
  // 不用再按确定了
  // 2006-7-26 added by http://www.hbcms.com
  window.returnValue = SelColor.value;
  window.close();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onmouseover>
  RGB.innerText = event.srcElement.bgColor;
  EndColor();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onmouseout>
  RGB.innerText = SelRGB;
  EndColor();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onclick>
  SelGRAY = event.srcElement.title;
  EndColor();
  // 不用再按确定了
  // 2006-7-26 added by http://www.hbcms.com
  window.returnValue = SelColor.value;
  window.close();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onmouseover>
  GRAY.innerText = event.srcElement.title;
  EndColor();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onmouseout>
  GRAY.innerText = SelGRAY;
  EndColor();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=Ok EVENT=onclick>
  window.returnValue = SelColor.value;
  window.close();
</SCRIPT>

</HEAD>

<BODY bgcolor=menu>
<span id=hbcms_select_color>
<div align="center"><center><table border="0" cellspacing="10" cellpadding="0"><tr><td>
<TABLE ID=ColorTable BORDER=0 CELLSPACING=0 CELLPADDING=0 style='cursor:hand'>
<SCRIPT LANGUAGE=JavaScript>
function wc(r, g, b, n)
{
        r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
        g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
        b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;

        document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>');
}

var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);

  for(i = 0; i < 16; i ++)
  {
     document.write('<TR>');
     for(j = 0; j < 30; j ++)
     {
             n1 = j % 5;
             n2 = Math.floor(j / 5) * 3;
             n3 = n2 + 3;

             wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),
                     (cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),
                     (cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);
     }

     document.writeln('</TR>');
  }
</SCRIPT>
</TABLE></td><td>
<TABLE ID=GrayTable BORDER=0 CELLSPACING=0 CELLPADDING=0 style='cursor:hand'>
<SCRIPT LANGUAGE=JavaScript>
  for(i = 255; i >= 0; i -= 8.5)
     document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>');
</SCRIPT>
</TABLE></td></tr></table></center></div>

<div align="center"><center><table border="0" cellspacing="10" cellpadding="0">
<tr><td rowspan="2" align="center">
选中色彩
<table ID=ShowColor border="1" width="50" height="30" cellspacing="0" cellpadding="0">
<tr><td></td></tr></table>
<!-- // 2006-7-26 added by http://www.hbcms.com -->
<BUTTON ONCLICK="initColor();" style="height:20px;width:50px;font-size:9pt;" οnfοcus="blur();">恢复</BUTTON>
</td>
<td rowspan="2">
<!-- // 2006-7-26 added by http://www.hbcms.com -->
<font style="cursor:hand;" οnclick='alert("选色使用技巧：/n/n1.双击颜色 或 单击颜色,微调亮度,点确定/n/n2.色彩亮度微调:在右边竖立的颜色条中进行/n");' title="点击查看详细帮助">帮助: 选色技巧</font>
<BR>
基色: <SPAN ID=RGB></SPAN><BR>
亮度: <SPAN ID=GRAY>120</SPAN><BR>
代码: <INPUT TYPE=TEXT SIZE=7 ID=SelColor style="height:20px;font-size:9pt;"></td>
<td><BUTTON ID=Ok TYPE=SUBMIT>确定</BUTTON></td></tr>

<tr><td><BUTTON ONCLICK="window.close();">取消</BUTTON></td></tr>


</table></center></div>
</span>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 初始化传递过来的颜色
// 2006-7-26 added by http://www.hbcms.com/
initColor();
//-->
</SCRIPT>

 


<SCRIPT LANGUAGE="JavaScript">
<!--

// 为了方便大家查看本程序效果
// 以下代码为本页面效果测试用途
// 测试方法：将本页面所有源代码拷贝到一个空白的网页中
// 直接预览，或 保存并打开该网页 即可看到效果，不用再做其它设置
// 最新改良版本可以在这里下载：http://www.hbcms.com
if ( location.href.indexOf('?') == -1 && location.href.indexOf('#')==-1)        {

       
        function getMyColorTest(t)        {
                if ( location.href.indexOf('http://') == 0 ) {
                        var old_color = ( t.value.indexOf('#') == 0 ) ? '?'+t.value.substr(1) : '?' + t.value;
                } else {
                        var old_color = ( t.value.indexOf('#') == 0 ) ? '%3F'+t.value.substr(1) : '%3F' + t.value;
                }

          select_color_url = location.href+old_color;
          //alert(select_color_url);
          var color = showModalDialog(select_color_url, "", "dialogWidth:18.5em; dialogHeight:17.5em; status:0");
          if (color != null) {
                  t.value = color;
                  t.style.color = color;
          }  else {
                  t.focus();
          }
          return true;
        }

        document.getElementById("hbcms_select_color").innerHTML = '';
        document.write('<form>...<P><B>仿WINDOW的纯JS超酷颜色选择器HBcms改良版本</B><P>选择颜色：<input size="10" οnclick="getMyColorTest(this)" name="my_color" type="text" value="red" οnmοuseοver="this.style.color=this.value;" /> <P>使用方法请看本网页源代码<P>...</form>');
}


//-->
</SCRIPT>
</BODY>  
</HTML>
 

hanxcloveyou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
03-22
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
td标签内文字内容颜色改变
leaf_c的博客
03-02 8282
td标签 使用style样式改变文字内容颜色解决方法： <td style="color: red"> 我是td </td> 这种方式是没有效果的。 正确方式： <td><font style="color: red">我是td</font></td> 在td标签内加一个font标签，把改变文字内容颜色的style加到font标签内即可。 ...
HTML
做一枚优雅的IT女
01-14 1097
表单的例子 用户名： 密码：
css-tr中的每一个td都为红色
java学习者
07-12 774
&lt;style type="text/css"&gt;     .tdcolor td{         color: red;     }     &lt;/style&gt;   &lt;c:if test="${listR.ifOneDay == '1'}"&gt;     &lt;tr bgcolor="#F4F4F4" class="tdcolor&q
FSCapture 截屏取色器
07-10
- **十六进制取色**：提供十六进制颜色代码，便于在网页设计和编程中使用。 - **色彩历史记录**：保存最近取过的颜色，便于对比和重复使用。 - **色板管理**：创建和管理个人色板，提高色彩搭配效率。 4. **其他...
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
10-30
- CSS样式定义，用来设定表格的基本样式，包括宽度、边框、边距等。 - HTML表格结构，包含`<table>`标签和多个`<tr>`（表格行）、`<th>`（表头单元格）和`<td>`（表格单元格）。 - JavaScript脚本，用来绑定鼠标悬停...
16进制颜色对照表
01-27
早期的网页设计受限于显示技术和设备的限制，特别是当显示器使用256色调色板时，为了确保所有用户都能正确地看到网页上设定的颜色，引入了“216跨平台Web安全色”。这些颜色是由RGB色彩模型中的红绿蓝三原色各取16个...
C# winform -Windows屏幕工具、屏幕截图、贴图、屏幕取色、截图文字、表格识别、截图翻译、GIF录屏、GIF压缩
最新发布
02-03
本文将深入探讨如何利用C# WinForm技术构建一系列实用的屏幕工具，包括屏幕截图、贴图、屏幕取色、截图文字识别、表格识别、翻译功能、GIF录屏以及GIF压缩等。 首先，屏幕截图是此类工具的基础功能。在C# WinForm中...
易语言表格不显示滚动条的代码
08-26
如果记录数为零，说明表格为空，此时隐藏表格的标尺，设置表格的背景颜色为灰色，并设定数据源的相关属性，如表头文本、对齐方式、列宽以及单元格的背景色。同时，当表格的光标位置改变时，会更新选中行的背景色，以...
sheetjs:创建和操作CSSStyleDeclarations
05-01
SheetJS 使用javascript轻松创建和操作CSSStyleDeclarations ： import { StyleSheet } from 'sheetjs' ; // or const { StyleSheet } = window . sheetjs ; const styleSheet = new StyleSheet ( ) ; const s = styleSheet . stylesForSelector ; // changes background color for all current and future matching elements s ( '#content .my-selector' ) . backgroundColor = 'green' ; 当您需要动态样式的元素数量众多时，这非常有用。 jQuery .css（）与SheetJ
读取Excel文件中的单元格的内容和颜色
weixin_30659829的博客
06-08 664
怎样读取Excel文件中的单元格的内容和颜色 先创建一个Excel文件，在A1和A2中随意输入内容，设置A1的字体颜色为红色，A2的背景为黄色。需要 using Excel = Microsoft.Office.Interop.Excel;或者using Microsoft.Excel; string file = @"E:\test.xls"; ...
excelJs 单元格背景颜色填充
mutouren_abc的博客
04-22 2356
excelJs 单元格颜色填充
Sheet.JS 使用-html版
benlalagang的博客
11-13 5177
在使用后台管理系统中用到了一些表格、想到将浏览器中的表格(table) 和excel/xlsx格式的文件、JSON数据格式的相互转换也是很常见的功能。 搜索了一下 Sheet.JS是很常用的一个工具
js改变表格颜色
//逆风走，不滞留//
01-10 2367
不错的一个效果，注释很详细： //点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) {      var sTable = document.getElementById("ServiceListTable")      for(var i=1;i     {          if (sTable.rows[
前端知识分享——SheetJS 用法体验
sinat_43095140的博客
01-26 1万+
前端知识分享——SheetJS 用法体验 Write and share what I see and hear 使用SheetJS导出 Excel 表格 最近遇到一个很好用的前端导出Excel 表格的工具 – SheetJS 官方地址 github地址 官方提供了多种版本，自己做点小demo可以使用社区免费版本 使用方法 具体使用方法在官方文档中有很详细的说明，这里举个例子 安装 npm install xlsx 引入 import xlsx from 'xlsx' 使用 // 1. 创建一个工
基于 SheetJS 的前端合并单元格复杂表头导入
qq_43600513的博客
04-23 1836
顶部为基于 antdv 的 table 组件的复现效果。复现 Excel 表格中，合并完单元格后的效果。table 组件用到的 columns 配置，及 dataSource 数据，均由解析函数一并返回。无需要开发者二次开发及维护。底部为解析函数解析后返回的三个数据结果。分别为解析后的 antdv columns 表格列的配置项，直接传递给 table 组件的 columns 属性使用。
如何在HTML表格的td标签中添加字体颜色
热门推荐
三桥君
08-02 1万+
摘要：微信搜索【三桥君】 一、问题 如何改变表格中的字体颜色？改成如图红色字体。 二、方法 <td><font size="5" color="red">我是文字</font></td> 三、解析 td标签中不能直接改字体颜色，但body中可以，如 <body text="red"> td标签中只可以设置背景颜色，如 <td bgcolor="gray"> 文章整理不易，如有帮助请点赞关注支持，谢谢！微信搜索【三桥君】，.
HTML表格色彩与样式设定
使用`<table>`标签的`bgcolor`属性可以设置整个表格的背景颜色。例如： ```html ``` 这将使表格的背景变为蓝色。 2. 表格行的色彩 `bgcolor`属性也可以用在`<tr>`标签内，来设定某一行的背景颜色。如果`<tr>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值