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 $( ...
随机推荐
- mysql优化
一.优化事项 1. 数据库(表)设计合理 (不合理设计导致内伤) 我们的表设计要符合3NF 3范式(规范的模式) , 有时我们需要适当的逆范式.2. sql语句的优化(索引,常用小技巧 ...
- EditText限制小数点前后位数
在EditText输入数字的时候,通常我们需要限制小数点前后位数.比如金额输入一般我们需要限制小数点后面最多2位.我们可以通过 TextWatcher 实现. public class MyWatch ...
- [转] nodemon 基本配置与使用
在开发环境下,往往需要一个工具来自动重启项目工程,之前接触过 python 的 supervisor,现在写 node 的时候发现 supervisior 在很多地方都有他的身影,node 也有一个 ...
- css 深入浅出定位
前面我们简单的了解了盒子模型,这里我们就不复习了哈.有什么不清楚的去看我的上一篇博文.其实说定位之前大家一定要先理解一个东西:文档流,那什么是文档流?和文档有关系吗?是dom树吗? 这一对的问题我们应 ...
- appium的几点总结
原文链接:http://blog.csdn.net/bear_w/article/details/50345283 1. 建立session时常用命令: DesiredCapabilities cap ...
- json相关的一些用法
一. json可以表示3种类型的值: 简单值 . 对象. 数组 表示对象时:>1. 没有变量的概念 ,所以不用申明变量 >2. 没有末尾结束 ...
- @autowired和@resource的区别
@Resource的作用相当于@Autowired,只不过@Autowired按byType自动注入,而@Resource默认按 byName自 动注入罢了.@Resource有两个属性是比较重要的, ...
- 安卓端网页浏览过程中实时更新title的web实现
$(function () { var scrollTop = 0, //缓存上一次触发scroll的时候的scrollTop值 appendIndex = 0, //由于第23行append这个操作 ...
- [原创]MySQL innodb_rollback_on_timeout参数对锁的影响
环境:Server version: 5.6.21-log MySQL Community Server (GPL) 前提提要: innodb_rollback_on_timeout是 ...
- Web服务器控件之button
button有两种类型的按钮,一种是提交按钮,一种是命令按钮.只说命令按钮. 命令按钮事要使用两个属性,分别是CommandName和CommandArguement属性,当该按钮被点击时,将页面中的 ...