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 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
全面分析JavaScript 继承
May 30 Javascript
js实现计时器秒表功能
Dec 16 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
JS实现九宫格拼图游戏
Jun 28 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
论建造顺序的重要性
2020/03/04 星际争霸
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
javascript 特殊字符串
2009/02/25 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
tab栏切换原理
2017/03/22 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python 追踪except信息方式
2020/04/25 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
手机销售员岗位职责
2015/04/11 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
Mysql事务索引知识汇总
2022/03/17 MySQL
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers