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 相关文章推荐
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
JS一次前端面试经历记录
Mar 19 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
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
微信小程序开发技巧汇总
2019/07/15 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python实现基本线性数据结构
2016/08/22 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
百度JavaScript笔试题
2015/01/15 面试题
高二政治教学反思
2014/02/01 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
体操比赛口号
2014/06/10 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
党风廉正建设责任书
2015/01/29 职场文书