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 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 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入门基础之php代码写法
2011/12/30 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
JavaScript中Function详解
2015/02/27 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
详解Python中dict与set的使用
2015/08/10 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python机器学习之神经网络(三)
2017/12/20 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
中医药大学毕业生自荐信
2013/11/08 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
教师节商场活动方案
2014/02/13 职场文书
自主招生推荐信范文
2014/05/10 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
教师党员承诺书2015
2015/01/21 职场文书
学习保证书100字
2015/02/26 职场文书
证婚人致辞精选
2015/07/28 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python