HTML Color Picker(js拾色器效果)

 更新时间:2013年08月27日 18:59:17   作者:  
这篇文章主要是用js实现拾色器效果,来自国外的网站,喜欢的朋友可以参考下
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深度拷贝一个数组

    一般情况下,使用 “=” 可以实现赋值。但对于数组、对象、函数等这些引用类型的数据,这个符号就不好使了。下面我们来详细学习下吧
    2019-06-06
  • 详解如何准确判断JavaScript中的数据类型

    详解如何准确判断JavaScript中的数据类型

    JavaScript中,我们经常需要判断数据类型以便于正确地处理数据,本文将介绍JavaScript中的数据类型判断技术,包括typeof操作符、instanceof操作符、Object.prototype.toString方法以及ES6新增的一些数据类型判断方法,需要的朋友可以参考下
    2023-08-08
  • Mvc提交表单的四种方法全程详解

    Mvc提交表单的四种方法全程详解

    本文给大家介绍mvc提交表单的四种方法,分别是MVC HtmlHelper方法,传统Form表单Aciton属性提交,Jquery+Ajax 提交表单,MVC Controller控制器和表单参数传递,介绍的非常详细,需要的朋友参考下
    2016-08-08
  • webpack-mvc 传统多页面组件化开发详解

    webpack-mvc 传统多页面组件化开发详解

    这篇文章主要介绍了webpack-mvc 传统多页面组件化开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • js弹出窗口简单实现代码

    js弹出窗口简单实现代码

    这篇文章主要为大家详细介绍了js弹出窗口的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • javascript中indexOf技术详解

    javascript中indexOf技术详解

    indexOf()函数用于查找子字符串在当前字符串中第一次出现的位置。该函数属于String对象,所有主流浏览器均支持该函数。下面我们就来详细探讨下javascript的index0f()函数
    2015-05-05
  • js内置对象处理_打印学生成绩单的简单实现

    js内置对象处理_打印学生成绩单的简单实现

    下面小编就为大家带来一篇js内置对象处理_打印学生成绩单的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • Vue考试系统的后台管理功能开发示例解读

    Vue考试系统的后台管理功能开发示例解读

    这篇文章主要介绍了Vue考试系统后台管理项目的登录、记住密码功能具体实现流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • LayUi数据表格自定义赋值方式

    LayUi数据表格自定义赋值方式

    今天小编就为大家分享一篇LayUi数据表格自定义赋值方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 基于javascript实现的搜索时自动提示功能

    基于javascript实现的搜索时自动提示功能

    这篇文章主要介绍了基于javascript实现的搜索时自动提示功能,非常实用,推荐给需要的小伙伴参考下。
    2014-12-12

最新评论