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 iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
JS中如何优雅的使用async await详解
Oct 05 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 图片上添加透明度渐变的效果
2009/06/29 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
php获取excel文件数据
2017/04/21 PHP
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
Python下的twisted框架入门指引
2015/04/15 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python实现低通滤波器代码
2020/02/26 Python
Python中无限循环需要什么条件
2020/05/27 Python
scrapy头部修改的方法详解
2020/12/06 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
电视购物广告词
2014/03/19 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL