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+CSS图片幻灯切换特效
Nov 20 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
js实现京东秒杀倒计时功能
Jan 21 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
微信自定义分享php代码分析
2016/11/24 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
python打印异常信息的两种实现方式
2019/12/24 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
构造器Constructor是否可被override?
2013/08/06 面试题
Linux中如何用命令创建目录
2015/01/12 面试题
天鹅的故事教学反思
2014/02/04 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
股权转让协议书范本
2014/04/12 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
儿童生日会策划方案
2014/05/15 职场文书
学校宣传标语
2014/06/18 职场文书
2015年工程师工作总结
2015/04/30 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
一文搞懂php的垃圾回收机制
2021/06/18 PHP
Java设计模式之代理模式
2022/04/22 Java/Android