HTML Color Picker(js拾色器效果)


Posted in Javascript onAugust 27, 2013

File Name : colorpicker.html
Requirement : Internet Explorer or Mozilla
Author : Jean-Luc Antoine
Submitted : 26/03/2005
Category : 4K

<form name="recherche" method="post" action="yourpage.html">
<input type=hidden name="rgb" value="123">
<table style="background-color:#f6f6f6;border:1px dotted #666;padding:5px;margin:0px auto;">
<tr><td align=right>Couleur:<br><small>Cliquez pour lister les<br>oeuvres les plus proches<br>de la couleur sélectionnée</small></td>
<td style="border:1px outset #CCF;background-color:#ffe;width=172">
<div id=temoin style='float:right;width:40px;height:128px;'> </div><script language="Javascript" type="text/javascript"> 
<!--
var total=1657;var X=Y=j=RG=B=0;
var aR=new Array(total);var aG=new Array(total);var aB=new Array(total);
for (var i=0;i<256;i++){
aR[i+510]=aR[i+765]=aG[i+1020]=aG[i+5*255]=aB[i]=aB[i+255]=0;
aR[510-i]=aR[i+1020]=aG[i]=aG[1020-i]=aB[i+510]=aB[1530-i]=i;
aR[i]=aR[1530-i]=aG[i+255]=aG[i+510]=aB[i+765]=aB[i+1020]=255;
if(i<255){aR[i/2+1530]=127;aG[i/2+1530]=127;aB[i/2+1530]=127;}
}
function p(){var jla=document.getElementById('choix');jla.innerHTML=artabus;jla.style.backgroundColor=artabus;document.forms['recherche'].rgb.value=artabus}
var hexbase=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var i=0;var jl=new Array();
for(x=0;x<16;x++)for(y=0;y<16;y++)jl[i++]=hexbase[x]+hexbase[y];
document.write('<'+'table border="0" cellspacing="0" cellpadding="0" onMouseover="t(event)" onClick="p()">');
var H=W=63;
for (Y=0;Y<=H;Y++){
 s='<'+'tr height=2>';j=Math.round(Y*(510/(H+1))-255)
 for (X=0;X<=W;X++){
  i=Math.round(X*(total/W))
  R=aR[i]-j;if(R<0)R=0;if(R>255||isNaN(R))R=255
  G=aG[i]-j;if(G<0)G=0;if(G>255||isNaN(G))G=255
  B=aB[i]-j;if(B<0)B=0;if(B>255||isNaN(B))B=255
  s=s+'<'+'td width=2 bgcolor=#'+jl[R]+jl[G]+jl[B]+'><'+'/td>'
 }
 document.write(s+'<'+'/tr>')
}
document.write('<'+'/table>');
var ns6=document.getElementById&&!document.all
var ie=document.all
var artabus=''
function t(e){
source=ie?event.srcElement:e.target
if(source.tagName=="TABLE")return
while(source.tagName!="TD" && source.tagName!="HTML")source=ns6?source.parentNode:source.parentElement
document.getElementById('temoin').style.backgroundColor=artabus=source.bgColor
}
// -->
</script>
<div id=choix style='height:24px;'  onClick="document.forms['recherche'].rgb.value='';this.style.backgroundColor=''"> </div><td></tr>
<tr><td colspan=2 align=center><input type=submit></td></tr>
</table>
</form>

来源:http://www.interclasse.com/scripts/colorpicker.php

Javascript 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
javascript常用函数(2)
Nov 05 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 #Javascript
javascript:void(0)使用探讨
Aug 27 #Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 #Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 #Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 #Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 #Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 #Javascript
You might like
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
js jquery做的图片连续滚动代码
2008/01/06 Javascript
Javascript模块模式分析
2008/05/16 Javascript
javascript radio 联动效果
2009/03/04 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
Python常用内置函数总结
2015/02/08 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python协程的用法和例子详解
2017/09/09 Python
python 将md5转为16字节的方法
2018/05/29 Python
python修改txt文件中的某一项方法
2018/12/29 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
欢迎横幅标语
2014/06/17 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
监理中标通知书
2015/04/16 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
python保存图片的四个常用方法
2022/02/28 Python
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android