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 相关文章推荐
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
php在线代理转向代码
2012/05/05 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
python创建临时文件夹的方法
2015/07/06 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
python元组拆包实现方法
2021/02/28 Python
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
大四毕业生自荐书
2014/07/05 职场文书
争先创优公开承诺书
2014/08/30 职场文书
大学生实习证明
2015/06/16 职场文书
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers