Html 颜色选择器,支持返回RGB值与Html颜色值

最新推荐文章于 2024-03-17 09:48:23 发布
最新推荐文章于 2024-03-17 09:48:23 发布
阅读量4.5k 收藏 2
点赞数
分类专栏： 软件开发 文章标签： html function border generator office javascript

效果如图:

< HTML >
< HEAD >
< TITLE >  Office 风格颜色选择器 </ TITLE >
< META  NAME ="Generator"  CONTENT ="EditPlus" >
< META  NAME ="Author"  CONTENT ="" >
< META  NAME ="Keywords"  CONTENT ="" >
< META  NAME ="Description"  CONTENT ="" >
</ HEAD >

< BODY >
< script  language =javascript >
<!--

//夜狼制作 OFFICE风格的色彩选择器

//注意:只有把<script></script>标签放在<body>标签内才可以正常使用“其它颜色”功能

document.write("<OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>");
var ocolorPopup = window.createPopup();
var ecolorPopup=null;

function colordialogmouseout(obj){
    obj.style.borderColor="";
    obj.bgColor="";
}

function colordialogmouseover(obj){
    obj.style.borderColor="#0A66EE";
    obj.bgColor="#EEEEEE";
}

function colordialogmousedown(color){
    ecolorPopup.value=color;
    //document.body.bgColor=color;
    ocolorPopup.document.body.blur();
}

function colordialogmore(){
    var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value);
    sColor = sColor.toString(16);
    if (sColor.length < 6) {
        var sTempString = "000000".substring(0,6-sColor.length);
        sColor = sTempString.concat(sColor);
    }
    ecolorPopup.value="#"+sColor.toUpperCase();
    //document.body.bgColor="#"+sColor.toUpperCase();
    ocolorPopup.document.body.blur();
}

function colordialog(){
    var e=event.srcElement;
    e.onkeyup=colordialog;
    ecolorPopup=e;
    var ocbody;
    var oPopBody = ocolorPopup.document.body;
    var colorlist=new Array(40);
    oPopBody.style.backgroundColor = "#f9f8f7";
    oPopBody.style.border = "solid #999999 1px";
    oPopBody.style.fontSize = "12px";

    colorlist[0]="#000000";    colorlist[1]="#993300";    colorlist[2]="#333300";    colorlist[3]="#003300";
    colorlist[4]="#003366";    colorlist[5]="#000080";    colorlist[6]="#333399";    colorlist[7]="#333333";

    colorlist[8]="#800000";    colorlist[9]="#FF6600";    colorlist[10]="#808000";colorlist[11]="#008000";
    colorlist[12]="#008080";colorlist[13]="#0000FF";colorlist[14]="#666699";colorlist[15]="#808080";

    colorlist[16]="#FF0000";colorlist[17]="#FF9900";colorlist[18]="#99CC00";colorlist[19]="#339966";
    colorlist[20]="#33CCCC";colorlist[21]="#3366FF";colorlist[22]="#800080";colorlist[23]="#999999";

    colorlist[24]="#FF00FF";colorlist[25]="#FFCC00";colorlist[26]="#FFFF00";colorlist[27]="#00FF00";
    colorlist[28]="#00FFFF";colorlist[29]="#00CCFF";colorlist[30]="#993366";colorlist[31]="#CCCCCC";

    colorlist[32]="#FF99CC";colorlist[33]="#FFCC99";colorlist[34]="#FFFF99";colorlist[35]="#CCFFCC";
    colorlist[36]="#CCFFFF";colorlist[37]="#99CCFF";colorlist[38]="#CC99FF";colorlist[39]="#FFFFFF";

    ocbody = "";
    ocbody += "<table CELLPADDING=0 CELLSPACING=3>";
    ocbody += "<tr height="20" width="20"><td align="center"><table style="border:1px solid #808080;" width="12" height="12" bgcolor=""+e.value+""><tr><td></td></tr></table></td><td bgcolor="eeeeee" colspan="7" style="font-size:12px;" align="center">当前颜色</td></tr>";
    for(var i=0;i<colorlist.length;i++){
        if(i%8==0)
            ocbody += "<tr>";
        ocbody += "<td width="14" height="16" style="border:1px solid;" onMouseOut="parent.colordialogmouseout(this);" onMouseOver="parent.colordialogmouseover(this);" onMouseDown="parent.colordialogmousedown('"+colorlist[i]+"')" align="center" valign="middle"><table style="border:1px solid #808080;" width="12" height="12" bgcolor=""+colorlist[i]+""><tr><td></td></tr></table></td>";
        if(i%8==7)
            ocbody += "</tr>";
    }
    ocbody += "<tr><td align="center" height="22" colspan="8" onMouseOut="parent.colordialogmouseout(this);" onMouseOver="parent.colordialogmouseover(this);" style="border:1px solid;font-size:12px;cursor:default;" onMouseDown="parent.colordialogmore()">其它颜色</td></tr>";
    ocbody += "</table>";

    oPopBody.innerHTML=ocbody;
    ocolorPopup.show(e.offsetLeft, e.offsetTop+e.offsetHeight, 158, 147, document.body);
}
//-->
 </ script >
选择颜色： < input  name ="sel1"  type ="text"  onfocus ="colordialog()" ></ BODY >
</ HTML >  
hiyu2218
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
HTML颜色选择器
11-13
HTML颜色选择器HTML颜色选择器HTML颜色选择器
html选择器和背景颜色
Ljj_fishhG的博客
02-21 554
背景平铺：background-repeat（bgr） • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……子代选择器 ：选择器语法：选择器1 > 选择器2 { css }并集选择器： 选择器语法：选择器1 ， 选择器2 { css }后代选择器 ：选择器语法：选择器1 选择器2 { css }交集选择器： 选择器语法：选择器1 ， 选择器2 { css }
Bootstrap Colorpicker - 一款简单易用的配色工具
最新发布
gitblog_00007的博客
03-17 484
Bootstrap Colorpicker - 一款简单易用的配色工具 Bootstrap Colorpicker 是一个基于Bootstrap框架的轻量级插件，能够帮助开发者快速创建一个美观且功能强大的颜色选择器。 功能介绍 简单易用：只需添加一个简单的HTML标签，就可以创建一个颜色选择器。 多种模式：支持多种显示模式，包括调色板、滑块、方格等。 可自定义：可以自定义颜色选择器的颜色值和默认...
简单的html颜色选择器
superzlc的专栏
08-26 9597
查资料参照着做了一个，用来理解颜色选择器，效果如图： 主要渐变色显示和颜色计算，还有点小问题，勉强能自用 &lt;style&gt; .select-color { } .select-color .select-color-aaa { display:inline-block;width:256px;height:256px;background-color:#ff0000; } ....
RGB_打开/获取颜色选择器(RGB)的几种方式/本地RGB查询/css颜色名参考
xuchaoxin1375的博客
11-10 2579
文章目录mspaintsnipaste在线网站浏览器元素审查 mspaint snipaste 在线网站 https://colorpicker.me/ https://redketchup.io/color-picker 浏览器元素审查
js实现的在线Html颜色选择器及Html颜色代码大全
key12315的专栏
03-11 518
在 HTML 中，可以使用十六进制值指定颜色: 十六进制颜色由#RRGGBB指定，其中RR（红色）、GG（绿色）和BB（蓝色）十六进制整数指定颜色的分量。 十六进制颜色表示值中rr（红色）、gg（绿色）和bb（蓝色）是介于00和ff之间的十六进制值（与十进制0-255相同） 大多数的浏览器都支持颜色名集合,另外216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色
colr_pickr：Colr Pickr，这是一个使用SVG构建的香草JavaScript颜色选择器组件，具有诸如保存颜色的功能。 与chrome-dev-tools颜色选择器类似的设计
01-31
与chrome-dev-tools颜色选择器类似的设计特征： 拖动交互式颜色选择器，可以轻松使用查找颜色，包括“饱和度和亮度”框，“色相”滑块和“不透明度”滑块读取和输出HEX，RGB，HSL，HEXA，RGBA和HSLA颜色值保存自定义...
tkColorPicker:Tkinter的颜色选择器对话框，替代tkinter.colorchooser-开源
04-25
tkcolorpicker模块包含一个实现颜色选择器对话框的ColorPicker类和一个显示颜色选择器并以RGB和HTML格式返回所选颜色的askcolor函数。
Javascript-Practise-Easy-Examples:易于学习的Javascript，当您学习这些示例时便会喜欢它
04-13
可帮助您学习Javascript 原料药全屏天气获取Pixivweb图片帆布基本的单击更改颜色和宽度功能绘制矩形图书馆D3js 树木日期数码时钟这个月有多少天随时间变化的颜色选择日期DOM 创建新节点标签添加标题图表Echarts酒吧...
EXCEL集成工具箱V8.0完整增强版(精简)
09-23
【选区背景选择】 进行着色功能切换，支持行着色、列着色、行与列同时着色、智能着色、选区着色、反向着色共6种方式供选择，可以自定义56种基本及颜色板任意着色颜色。 【条件背景】 默认启动智能着色方式，此功能...
EXCEL集成工具箱V6.0
09-11
【选区背景选择】 进行着色功能切换，支持行着色、列着色、行与列同时着色、智能着色、选区着色、反向着色共6种方式供选择，可以自定义56种基本及颜色板任意着色颜色。 【条件背景】 默认启动智能着色方式，此功能...
html网页颜色选择器
06-12
让你无需记住各种颜色代码就可以制作出缤纷多彩的html网页。
一个Html版本的颜色选择器
02-28
一个html版本的颜色选择器，通过一个颜色选择器可以在一个输入框里得到选中颜色的编码和效果。很方便。
HTML颜色选择器实现代码
09-05
HTML颜色选择器实现代码需要的朋友可以参考下。
网页颜色选择器
07-07
网页上选择一些颜色，可以对字体颜色修饰等
颜色选择器
03-20
取色器，Windows下使用的工具，绿色版免安装，可以取像素级别的色块颜色，支持hex字符串形式和rgb值形式
html简易颜色选择器,HTML颜色选择器实现代码
weixin_42295892的博客
06-03 1042
HTML颜色选择器实现代码HTML颜色选择器范围：#000 - #FFF//  ');}document.writeln('');var begin = 0;for (var i = 0; i ');for (var g = begin; g');}}document.writeln('');}}// ]]>[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]时间： 2010-11-2...
Android之 颜色选择器
qq_29848853的博客
04-22 2911
颜色选择器
canvas
qq_41370549的博客
07-11 346
canvas 在渲染复杂的动效，把数据可视化图形显示，游戏场景等需求，都会用canvas技术，比dom操作性能更高 特点： 1.h5的新增图形标签，通过提供的javaScript函数绘制各种图表或利用算法是吸纳非常华丽的动效 2，在以前是用flash实现，但不能和js交互 3,适合动态图形绘制 缺点 是位图，缩放会模糊。 svg意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于
STC8H8K利用颜色传感器返回的RGB值判断颜色
06-01
STC8H8K单片机可以通过读取颜色传感器返回的RGB值来判断颜色。假设你使用的是TCS34725颜色传感器，可以使用以下步骤来读取RGB值并判断颜色： 1. 初始化颜色传感器，设置传感器的增益、积分时间等参数。 2. 通过I2C总线读取颜色传感器返回的红、绿、蓝三个通道的值，即RGB值。 3. 根据RGB值的大小关系来判断颜色。一种简单的方法是将RGB值分别与一组预设的RGB值进行比较，找到距离最小的预设RGB值，即可判断为该颜色。例如，你可以预设红色的RGB值为(255,0,0)，绿色的RGB值为(0,255,0)，蓝色的RGB值为(0,0,255)，黄色的RGB值为(255,255,0)，等等。在读取到RGB值后，计算RGB值与每个预设RGB值之间的欧几里得距离，找到距离最小的预设RGB值即可判断为该颜色。 4. 根据应用场景的需要，可以将判断颜色的代码封装成函数，方便调用。同时，还可以根据具体情况对判断颜色的方法进行优化，例如使用加权平均值、采用HSV颜色空间等方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值