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]点出统计器
Oct 11 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
Node.js实现文件上传
Jul 05 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
JS实现留言板功能
Jun 17 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
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
PHP4实际应用经验篇(3)
2006/10/09 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
python 多线程应用介绍
2012/12/19 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
python版飞机大战代码分享
2018/11/20 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
sort命令的作用和用法
2013/08/25 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
元旦获奖感言
2014/03/08 职场文书
个人评语大全
2014/05/04 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
反腐倡廉观后感
2015/06/08 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android