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 相关文章推荐
node在两个div之间移动,用ztree实现
Mar 06 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python中的choice()方法使用详解
2015/05/15 Python
Python栈类实例分析
2015/06/15 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
python实现登录与注册系统
2020/11/30 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
《灯光》教学反思
2014/02/08 职场文书
个人自我鉴定总结
2014/03/25 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
超市创业计划书
2014/09/15 职场文书
滞留工资返还协议书
2014/10/19 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书