HTML Color Picker(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

赞 (0)

相关推荐

  • HTML5 WebStorage(HTML5本地存储技术)

    HTML5 WebStorage(HTML5本地存储技术)

    WebStorage是HTML5中本地存储的解决方案之一,在HTML5的WebStorage概念引入之前除去IE User Data.Flash Cookie.Google Gears等看名字就不靠谱的解决方案,浏览器兼容的本地存储方案只有使用cookie.有同学可能会问,既然有了cookie本地存储,为什么还要引入WebStorage的概念? Cookie肿么了 cookie的缺陷是非常明显的 1. 数据大小:作为存储容器,cookie的大小限制在4KB左右这是非常坑爹的,尤其对于现在复杂的业

  • 使用Java获取html中Select,radio多选的值方法

    复制代码 代码如下: //jsp中的select多选代码<select name="selectvalues" size="4" multiple="multiple">  <option value="volvo">Volvo</option>  <option value="saab">Saab</option>  <option val

  • html的基本使用（HTML标签解释）

    一.链接在HTML中超文本的链接非常重要,基本格式如下:<A HREF="资源地址">链接文字</A> 1.本地链接①绝对路劲:<A HREF="C:\images\article.jpg">绝对路劲链接到本地图片</A>②相对路劲<A HREF ="article2.jpg"> 相对路劲链接到本地图片</A>③链接到上一级目录<A HREF="../test

  • js innerHTML 改变div内容的方法

    改变文字innerHTML每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记.通过改变一个元素的innerHTML后,一些用户交互,您可以更互动网页.但是,使用innerHTML需要一些准备,如果你希望能够利用它轻松,可靠.首先,你必须给予部分要更改身份证.与标识到位,你将能够使用getElementById功能,适用于所有的浏览器.在您认为建立您现在就可以操纵文字的要素.要开始了,让我们尝试改变文字一个大胆的标记.下面我们来看一个用js的inn

  • HTML服务器控件和WEB服务器控件的区别和联系介绍

    HTML服务器控件和WEB服务器控件的区别和联系介绍

    学习asp.net的时候,视频中总是做例子,这当然是一件好事,可是一会用Html服务器控件,一会用Web服务器控件,起初做起例子来也挺迷糊的,不知道怎么选择这个控件,心里别着这个扣也是很不舒服,决定先把它研究研究再继续学习,当时只是做了笔记但是没有好好的总结,今天把这部分知识重新整理一下拿出来与大家分享一下. 1.什么是Html服务器控件? 是HTML元素的一种演变,通过将HTML元素转换为HTML服务器控件,也就是添加Runat="Server"属性,这样就使得HTML元素组件可以在

  • HTML页面滚动时获取离页面顶部的距离2种实现方法

    方法一:DOM 复制代码 代码如下: <script> window.onscroll = function() { console.info(window.scrollY); } </script> 注册onscroll事件,在控制台(按F12)打印当前页面距离页面顶部的距离(单位:像素px) 方法二:jQuery 复制代码 代码如下: $(function() { $(window).scroll(function() { console.info($(window).scro

  • HTML Color Picker(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 typ

  • Android Studio设置颜色拾色器工具Color Picker教程

    你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取颜色: 你可能也知道Android Studio自带一个颜色拾色器,通过下面这种方式才能找到 这种方式获取颜色值限制性很强,需要特定的窗口,需要点击那么一小块颜色才能弹出窗口,才能使用 那有没有更好的方式? 答案是肯定的,不然这些个干嘛~~ 不用向上面那样去打开拾色器小工具程序,不用在特定的窗口点击特定的位置弹出拾色器工具,是用我们最喜欢的快捷键的方式打开 Android S

  • JQuery 拾色器插件发布-jquery.icolor.js

    JQuery 拾色器插件发布-jquery.icolor.js

    以前我一直用的那个(eyecon.ro) 功能完整也简易,但是不尽符合上面的要求,于是 google了N下,结果没找到现成的jquery拾色器插件很好的支持以下功能: 简单易用,仅显示常用的那些色块给用户选择,另外提供一个输入框方便用户输入自定义的色值 于是我写了icolor这个插件,除了支持上面的要求,还有别的一些特性如下: 1,默认提供的色值为"常用的浏览器安全的色值".相当于整合了下面最后一个prototype版本的颜色拾取器.关于浏览器安全色值,可参考维基文档http://en

  • js实现拾色器插件（ColorPicker）

    对一个前端来说,颜色选择的插件肯定不陌生,许多小伙伴对这类插件的实现可能会比较好奇,这里奉上原生js版本的拾色器. 效果图: 讲下实现方式: 1.颜色除了RGB跟十六进制的表现外,还有一个HSV的表现形式.H(hue)是色相,值域是0度到360度,这个值控制的是你看到的是什么颜色,通俗点讲就是红橙黄绿...:S(saturation)是饱和度,值域是0到1,这个值控制颜色的鲜艳程度,可以理解为大红跟淡红的差别:V(value)可以理解为亮度,值域也是0到1. 2.rgb颜色跟hsv颜色的相互转化

  • JS实现的网页上的颜色拾色器

    使用Js代码编写一个网页上用的颜色拾色器,也就是选择颜色用的,用鼠标单击任意颜色块,将弹出颜色值,当你想使用某种颜色而不知道颜色值的时候,用这个小特效可以告诉你颜色值是多少,比较方便. 颜色拾色器 红 绿 蓝 灰 用鼠标单击下面的颜色块,将弹出颜色值 for(i=0;i '+ishex(i*17) +' ') document.all['Ltd' + i].num=i } function ishex(which){ return which.toString(16); } document.w

  • jQuery soColorPacker 网页拾色器

    未采用生僻的jquery特性,能兼容jquery1.2.6以上所有版本 实例预览 引入文件 <link type="text/css" rel="stylesheet" media="all" href="soColorPacker/css/style.css" /> <script type="text/javascript" src="jquery1.8.0.min.js&q

  • JavaScript实现HSL拾色器

    HSL 和 HSV 在数学上定义为在 RGB 空间中的颜色的 R, G 和 B 的坐标的变换. 从 RGB 到 HSL 或 HSV 的转换 设 (r, g, b) 分别是一个颜色的红.绿和蓝坐标,它们的值是在 0 到 1 之间的实数.设 max 等价于 r, g 和 b 中的最大者.设 min 等于这些值中的最小者.要找到在 HSL 空间中的 (h, s, l) 值,这里的 h ∈ [0, 360)是角度的色相角,而 s, l ∈ [0,1] 是饱和度和亮度,计算为: h 的值通常规范化到位于

  • js双色时间效果代码

    TIMER TIMER [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 移动端js图片查看器

    本文实例为大家分享了js图片查看器插件的使用方法,制作手机使用的网页图片查看器,供大家参考,具体内容如下 这几天抽空在为项目开发一个量身的图片查看器,目前已初步完成需求. 开发场景是:在一个多文件下载展示列表中,如检测某些文件为图片时,则点击该文件时打开图片查看器展示该图片,并将列表内其它图片同时展示查看器队列内,可供前后滑动查看及其它附带功能. 乍一听功能点似乎有点多而且有些复杂,需要梳理一下 功能点整理 首先,我们要获得点击的图片文件对象及符合条件的图片文件对象集 其次,图片查看器的制作及图

  • 使用zrender.js绘制体温单效果

    今天我们来画折线图 效果图 以下为模拟数据 [{"time":19,"text":"入\n院\n19\n时\n11\n分","position":42,"cellMin":29.0,"cellSplit":0.2,"type":"text","color":"red","shape":nu

随机推荐