js颜色拾色器

最新推荐文章于 2024-07-04 14:40:01 发布
最新推荐文章于 2024-07-04 14:40:01 发布
阅读量1.6k 收藏 1
点赞数
文章标签： javascript

代码如下：

<html>
<head>
<title>颜色拾色器</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body style="font:menu">
<span class="style1"></span>
<table border="0" cellspacing="1" cellpadding="3" width="350" align="center" bgcolor="#dddddd">
<tr bgcolor="#FFFFFF"> 
<td width="10%" align="center"> 
<select name="select1" οnchange="selectmenu(this.value)">
<option value="1" selected>红</option>
<option value="2">绿</option>
<option value="3">蓝</option>
<option value="4">灰</option>
</select>
</td>
<td width="90%" align="center"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> 
<td align="center" style="font-size:12px">用鼠标单击下面的颜色块,将弹出颜色值</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#FFFFFF"> 
<td width="10%" align="center"> 
  <table id="table1" border="0" cellspacing="1" cellpadding="0">
<script language="JavaScript">
for(i=0;i<=15;++i){
document.write('<tr><td align="center" style="font:menu">'+ishex(i*17) +'</td><td id="Ltd' + i +'" bgcolor="rgb('+ (i*17) + ',0,0)" width="15" height="15" οnclick="changeright(this.num)"></td></tr>')
document.all['Ltd' + i].num=i
}
function ishex(which){
    return which.toString(16);
}
</script>
</table></td>
<td width="90%" align="center"> 
<table id="table2" border="0" cellspacing="1" cellpadding="0">
<script language="JavaScript">
document.write('<tr><td></td>')
for(i=0;i<=15;++i){
document.write('<td align="center" style="font:menu; ">'+ishex(i*17)+'</td>');
}
document.write('</tr>')
for(i=0;i<=15;++i){
document.write('<tr>')
document.write('<td align="center" style="font:menu;">'+ishex(i*17)+'</td>')
  for(j=0;j<=15;++j){
  document.write('<td id="Rtd'+i+'and'+j+'" style="font:menu;" bgcolor="rgb(0,'+(i*17)+','+(j*17)+')" width="15" height="15" οnclick="clickright(this)"></td>');
}
  document.write('</tr>')
}
</script>
</table>
</td>
</tr>
</table>
<script language="JavaScript">
function selectmenu(which){
switch(which){
case '1' :leftR();break;
    case '2' :leftG();break;
    case '3' :leftB();break;
    case '4' :leftA();break;
  }
}
function leftR(){
for(i=0;i<=15;++i){
    document.all['Ltd'+i].bgColor='rgb('+(i*17)+',0,0)';
    }
  rightR(0)
}
function leftG(){
for(i=0;i<=15;++i){
    document.all['Ltd'+i].bgColor='rgb(0,'+ (i*17) + ',0)';
}
  rightG(0)
}
function leftB(){
for(i=0;i<=15;++i){
    document.all['Ltd'+i].bgColor='rgb(0,0,'+(i*17)+')';
}
  rightB(0)
}
function leftA(){
for(i=0;i<=15;++i){
    document.all['Ltd'+i].bgColor='rgb('+(i*17)+','+(i*17)+','+(i*17)+')';
}
  rightA()
}
function rightR(which){
for(i=0;i<=15;++i){
    for(j=0;j<=15;++j){
      document.all['Rtd'+i+'and'+j].bgColor='rgb('+(which*17)+','+(i*17)+','+(j*17)+')';
}
    }
}
function rightG(which){
for(i=0;i<=15;++i){
for(j=0;j<=15;++j){
document.all['Rtd'+i+'and'+j].bgColor='rgb('+(i*17)+','+(which*17)+','+(j*17)+')';
}
    }
}
function rightB(which){
for(i=0;i<=15;++i){
for(j=0;j<=15;++j){
document.all['Rtd'+ i+'and'+j].bgColor='rgb('+(i*17)+','+(j*17)+','+(which*17)+')';
}
    }
}
function rightA(){
for(i=0;i<=15;++i){
for(j=0;j<=15;++j){
document.all['Rtd'+i+'and'+j].bgColor='rgb('+(i*16+j)+','+(i*16+j)+','+(i*16+j)+')';
}
    }
}
function clickright(which){
alert(which.bgColor)
}
function changeright(which){
switch(select1.value){
case '1' :rightR(which);break;
    case '2' :rightG(which);break;
    case '3' :rightB(which);break;
  }
}
</script>
</body>
</html>


南风丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 拾色器
冷月醉雪的博客
05-10 3033
HTML 拾色器选取颜色:或输入颜色值:OK或使用 HTML5:选择的颜色:黑色文本阴影白色文本阴影#33cc00rgb(51, 204, 0)hsl(105, 100%, 40%)hsv(105, 100%, 80%)淡 / 暗:100%   #ffffff95%   #ecffe590%   #d9ffcc85%   #c6ffb380%   #b3ff9975%   #9fff8070%  ...
JS实现的网页上的颜色拾色器
11-23
使用Js代码编写一个网页上用的颜色拾色器，也就是选择颜色用的，用鼠标单击任意颜色块,将弹出颜色值，当你想使用某种颜色而不知道颜色值的时候，用这个小特效可以告诉你颜色值是多少，比较方便。 颜色拾色器 ...
纯js的拾色器，（只有js）
10-29
纯js的拾色器，点击可实现获取的颜色内容
使用js实现拾色器
qq_43308263的博客
06-22 1678
使用js实现拾色器 HTML部分 <!--拷贝请评论，不做伸手党--> <div id="GroupColor" type="text" name="GroupColor" style="background-color: rgb(45, 49, 115);"> </div> js部分 var obj = document.getElementById("GroupColor"); var a = Colorpicker.create({
【JavaScript脚本宇宙】颜色处理神器大比拼：哪款JavaScript库最适合你？
最新发布
记录我的学习历程
07-04 1179
本文介绍了六个流行的JavaScript颜色处理库：TinyColor、Chroma.js、Color.js、Culori、D3-Color和ColorThief。通过分别讨论每个库的历史背景、主要功能、安装与使用方法、核心功能、常见应用场景，以及优缺点分析，全面比较了这些库在颜色格式转换、颜色操作、渐变生成、调色板生成和主色调提取等方面的性能。最后总结了不同库各自适合的使用场景和特点，以便开发者能够更有效地选择和应用这些工具。
强大的js拾色器
11-27
强大的 js 拾色器，可以嵌套在页面中，能够精确地进行颜色拾取
js实现拾色器插件（ColorPicker）
10-15
主要为大家详细介绍了js实现拾色器插件ColorPicker，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一款简单的拾色器：ColorTool拾色器
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
10-19 5416
这个是为我自己写得，因为我觉得如果需要获取网页上的某个颜色总是需要打开“开发者中心”的话太麻烦了；简单易用、易懂，仅使用JavaScript语言编写。
jscolor 颜色拾色器简易实现示例
05-12
内容索引:脚本资源,Ajax/JavaScript,颜色选择器,拾色器　jscolor 颜色拾色器简易实现示例，在网页上实现颜色的选择，仿Windows系统风格的窗体，主要使用了一个封装的Js类，这个类可让您快速实现网页上的颜色选择器。
原生js颜色选择色值拾取(拾色器)插件.zip
11-22
这样的插件可以帮助开发者创建自定义的拾色器，使用户能够轻松地选取和设置颜色。 1. **原生JavaScript**: 这种插件完全基于JavaScript语言的核心特性，不依赖于其他库或框架，因此它具有轻量级和高效的特点。原生...
js做的几款超好用的网页拾色器(colorpicker)
12-07
javascript制作的几款超好用的网页拾色器(colorpicker),找了好久才收集到。类似photoshop中的拾色器，还有几款是精简版的！
仿Photoshop取色功能,非常不错的网页JS拾色器.rar
07-09
JavaScript仿Photoshop的取色功能，一款非常棒的网页JS拾色器——ColorPicker编写实战源代码，模仿PhotoShop的设色器的功能，将其迁移到WEB应用中，当然了，本拾色器并不是一个完美的拾色器，因为只是模拟了HSV模式，而且只提供一个直观的界面，然后给出颜色的代码，实际上它并不能从屏幕的任意位置获取你想要的颜色。
jquery插件-web拾色器 网页拾色器colorpicker
08-19
搜集的三种款式不同的web失色器，用起来很方便。和photoshop里的背景颜色选择 功能差不多哦！
JS 网页拾色器
04-02
NULL 博文链接：https://hudeyong926.iteye.com/blog/1457313
前端制作 JS拾色器
11-16
前端制作 JS拾色器
js配合css3开发流畅的web拾色器功能
蒋伟平的博客
03-15 496
本实例中的web拾色器功能使用css3实现页面效果，即在页面上显示的元素用css3样式来实现的。再使用js生成拾色器颜色数据，并控制各元素的鼠标事件。当事件作为反应时，获取到对应的数据并显示颜色值。 拾色器的html元素分为三个部分，分别是拾色区域、色系区域和颜色显示区域，如图所示： web拾色器三个部分的html元素如下： <div class="color_container"> <div class="main_wrap"> <!--拾色区域--> &
原生JS实现拾色器功能
一只路过的小码农
08-23 485
纯JS实现取色器
用js做网页拾色器
bq222
03-18 1029
<br /><script language="javascript"><br /> var h = new Array(6);<br /> h[0] = "FF";<br /> h[1] = "CC";<br /> h[2] = "99";<br /> h[3] = "66";<br /> h[4] = "33";<br /> h[5] = "00";<br /> function action(RGB){<br />    parent.window.returnValue="#"+RGB;<br />
JavaScript实战：详解HSL拾色器实现与转换
在JavaScript实现HSL拾色器的过程中，作者可能提供了代码示例，帮助读者理解如何在用户界面中创建一个交互式的HSL选择器，让用户能够选择并调整色调、饱和度和亮度，从而实时改变显示的颜色。这种工具在设计和前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值