jquery颜色选择器
第二种：纯JAVASCRIPT:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2311">
<title>DW调色板</title>
<script>
var ColorHex=new Array('00','33','66','99','CC','FF')
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current=null function getEvent()
{
if(document.all)
{
return window.event;//如果是ie
}
func=getEvent.caller;
while(func!=null)
{
var arg0=func.arguments[0];
if(arg0)
{
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)||(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
{
return arg0;
}
}
func=func.caller;
}
return null;
} function intocolor()
{
var colorTable=''
for (i=0;i<2;i++)
{
for (j=0;j<6;j++)
{
colorTable=colorTable+'<tr height=12>'
colorTable=colorTable+'<td width=11 style="background-color:#000000">' if (i==0){
colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'}
else{
colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">'} colorTable=colorTable+'<td width=11 style="background-color:#000000">'
for (k=0;k<3;k++)
{
for (l=0;l<6;l++)
{
colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'
}
}
}
}
colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
+'<tr height=30><td colspan=21 bgcolor=#cccccc>'
+'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
+'<tr><td width="3"><td><input type="text" name="DisColor" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
+'<td width="3"><td><input type="text" name="HexColor" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td></tr></table></td></table>'
+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" onmouseover="doOver()" onmouseout="doOut()" onclick="doclick()" style="cursor:hand;">'
+colorTable+'</table>';
colorpanel.innerHTML=colorTable
} function doOver() {
var evt=getEvent();
var element=evt.srcElement || evt.target;
var DisColor=document.getElementById("DisColor");
var HexColor=document.getElementById("HexColor");
if ((element.tagName=="TD") && (current!=element)) {
if (current!=null){current.style.backgroundColor = current._background}
element._background = element.style.backgroundColor
DisColor.style.backgroundColor = rgbToHex(element.style.backgroundColor)
HexColor.value = rgbToHex(element.style.backgroundColor)
element.style.backgroundColor = "white"
current = element
}
} /**
* firefox 的颜色是以(RGB())出现，进行转换
*/
function rgbToHex(aa)
{
if(aa.indexOf("rgb") != -1)
{
aa=aa.replace("rgb(","")
aa=aa.replace(")","")
aa=aa.split(",")
r=parseInt(aa[0]);
g=parseInt(aa[1]);
b=parseInt(aa[2]);
r = r.toString(16);
if (r.length == 1) { r = '0' + r; }
g = g.toString(16);
if (g.length == 1) { g = '0' + g; }
b = b.toString(16);
if (b.length == 1) { b = '0' + b; }
return ("#" + r + g + b).toUpperCase();
}
else
{
return aa;
}
} function doOut() { if (current!=null) current.style.backgroundColor = current._background;
} function doclick(){
var evt=getEvent();
var element=evt.srcElement || evt.target;
if (element.tagName=="TD"){
var bg=rgbToHex(element._background);
alert("选取颜色: "+bg);
return bg;
}
}
</script>
</head> <body onLoad="intocolor()">
<div id="colorpanel" style="position: absolute;">
</div>
</body>
</html>
jquery颜色选择器的更多相关文章
- c#/asp.net实现炫酷仿调色板/颜色选择器功能
asp.net 之颜色选择器,仿调色板功能 1. 插件非常容易使用,只需引用相应的js文件和css样式文件即可,见代码示例,插件精小,炫酷 2. 只需要初始化即可使用,并且选择的颜色会在文本框中以16 ...
- 10个精选的颜色选择器Javascript脚本及其jQuery插件
Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本 实现及其传说中的jQuery插件实现 ...
- 改造过的JS颜色选择器
项目中用到颜色选择功能,在网上找了个颜色选择器,自己改了改代码.做成了一个可动态加载的颜色选择器. 把代码贴上,当是记录. /*Copyright(c)2009,www.supersite.me*/ ...
- HTML5的input color系统颜色选择器
前两天,我写了一篇<推荐两款jQuery色盘选择器>介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器.HTML5有一个input类型为color,即颜色 ...
- jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
- 基于vue的颜色选择器color-picker
项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...
- 插件使用一颜色选择器---cxColor
cxColor 是一款颜色选择器.这样的插件使用场景不多.可喜的这是国人写的. 官方网站: https://github.com/ciaoca/cxColor 使用方法: 1.引入jquery库 1 ...
- 基于vue的颜色选择器vue-color-picker
项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...
- python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
随机推荐
- STL插入删除和查询测试
博客园的markdown不知道怎么插入C++代码,只好放弃了..本文在我的blog发布:http://jwk000.github.io/2015/09/02/20150902/
- hdu1532网络流
(双倍经验题) 第二次写dinic模板,居然一遍写对了,而且短了不少O(∩_∩)O~ #include <cstdio> #define INF 2147483647 int n,m,an ...
- OSGEarth编译
解决OSGEarth编译时出现error LNK1181: 无法打开输入文件“optimized.lib的问题 以下方案受到了osg大神qq网名为“阿威.小号”的帮助. 在采用Cmake3.6.2创建 ...
- HashMap实现缓存
package com.cache; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; import org.a ...
- springmvc2 一个控制器写多个方法（非注解方式）
出处:http://blog.csdn.net/xuewenke/article/details/23895999 springmvc2 一个控制器写多个方法(非注解方式) 分类: spring 20 ...
- java记录
1. 包装类与自动装箱问题:在justjavac的博客上看到翻译的一篇文章 离开java,寻找更佳语言的十大理由 中关于自动装箱的一个描述: 这个特性是为了解决因原生类型的存在所导致的问题,在Java ...
- java-JDBC从数据库中读取数据并进行日期民族男女的转换
代码如下: package com.itnba.maya.mysql; import java.sql.*; import java.text.SimpleDateFormat; public cla ...
- HDU--航海舰队
海舰队 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- JS 的事件委托机制
以前写上图所示的鼠标点击触发事件,一般都是用如下所示的给每一个表示列表的标签绑定一个click事件(演示用的例子的框架是React): 毫无疑问,这样是比较繁琐的,以后维护修改改个函数名什么的还不方便 ...
- Unity3D 模型导入Error
在导入3d max模型的时候报错: 3ds Max could not be found.Make sure that 3ds Max is installed and the max file ha ...