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 相关文章推荐
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
深入了解php4(1)--回到未来
2006/10/09 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
详解vue 组件
2020/06/11 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
学习Python列表的基础知识汇总
2020/03/10 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
python中setuptools的作用是什么
2020/06/19 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
运动会广播稿500字
2014/01/28 职场文书
亲子拓展活动方案
2014/02/20 职场文书
银行进社区活动总结
2014/07/07 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2014年除四害工作总结
2014/12/06 职场文书
倡议书怎么写?
2019/04/11 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python