一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

首页游戏下载软件下载专题资讯教程 php教程 asp.net教程 css教程网页制作网页特效手机开发办公数码

+ -

当前位置：一聚教程网 > 网页特效 > 页面特效

推荐专题

最新下载

1

儿童玩具乐园
68.87MB 类型： 休闲益智
2

辉煌岁月九游版
19.27MB 类型： 体育竞技
3

无双霸业九游版
214.21MB 类型： 角色扮演
4

修复大师
35.95MB 类型： 模拟经营
5

逍遥吟手游
286.69MB 类型： 角色扮演
6

功夫熊猫3最新版
275.41MB 类型： 动作冒险
7

骰子大战
110.51MB 类型： 休闲益智
8

双人恶犬对决
85MB 类型： 休闲益智
9

三傻大冒险
27.62MB 类型： 休闲益智
10

调色大师
102.27MB 类型： 休闲益智

热门教程

1

诛仙2鬼王怎么加点鬼王加点推荐
时间：2025-08-20 类型： 游戏攻略
2

诛仙2见影灵泉奇遇任务怎么做见影灵泉奇遇任务流程攻略
时间：2025-08-20 类型： 游戏攻略
3

三国天下归心诸葛亮怎么样诸葛亮技能介绍一览
时间：2025-08-20 类型： 游戏攻略
4

三国天下归心追击队怎么玩追击队玩法教学
时间：2025-08-20 类型： 游戏攻略
5

三国天下归心武将怎么获得武将获取方法
时间：2025-08-20 类型： 游戏攻略
6

星痕共鸣剧毒蜂巢怎么获取剧毒蜂巢获取攻略
时间：2025-08-20 类型： 游戏攻略
7

新三国志曹操传李儒之影怎么打李儒之影打法教学
时间：2025-08-20 类型： 游戏攻略
8

辉烬队伍怎么搭配配队攻略指南
时间：2025-08-20 类型： 游戏攻略
9

创造吧我们的星球种田玩法怎么玩种田玩法介绍一览
时间：2025-08-20 类型： 游戏攻略
10

华夏千秋怎么表白表白方法一览
时间：2025-08-20 类型： 游戏攻略

js 颜色选择器代码

时间：2022-07-02 14:48:37 编辑：袖梨来源：一聚教程网

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.**w*3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

提示：您可以先修改部分代码再运行

<title> 颜色输入组件 </title>
<style>
body{font-size:12px;font-family:Arial;}
input{border:1px solid #aaa}
#colorPanel{_text-align:center;border:1px solid #666;background:#E7DFE7 url(img?uuid=206a914914c31cc60545db8cd3ff9c4e6f) no-repeat 97% 6%;font-size:12px;position:absolute;display:none;z-index:999}
.colorTitle{text-align:left;margin:5px 5px 0 5px;zoom:1}
#colorView{background:#000;border:1px solid #000;float:left;margin-right:4px;cursor:pointer;}
#colorValue{padding:4px 0 0 4px;float:left;border:1px solid #7B9EBD;}
#colorCell{margin:0 auto;padding:5px;clear:both;}
#colorTable table{border-collapse:collapse;}
#colorTable table td{border:1px solid #000;overflow:hidden;font-size:1px;cursor:pointer;}
</style>

<br>
<br>
<br>
<br>
<h1>简单的颜色设置器</h1>
设置背景颜色: <input type="text" name="" id="bb">
设置文本颜色: <input type="text" name="" id="bb2">

<script>
ColorPanel={
	init:function(){	return this.create().cellEvent()},//初始化
	$:function (x){	return typeof x=='string'?document.getElementById(x):x},
	create:function (){//创建所有HTML
		this.win=document.createElement("DIV");
		this.win.id="colorPanel";
		var m = '00,33,66,99,CC,FF'.split(','),a,b,c,d,e,f,x,y,z,
		T=!!document.attachEvent?' ':'';//谷歌会撑开表格
		Html=['<div class="colorTitle"><div id="colorView" title="#000000"><input type="text" id="colorValue" value="#000000" /><div id="colorCell"><table cellspacing="0" cellpadding="0" id="colorTable"><tr>'];
		for (x = 0; x < 6; ++x) {//按规律生成颜色单元格
			Html.push('<td><table cellspacing="0" cellpadding="0">');
			for (y = 0,a = m[x] ; y < 6; ++y) {
				Html.push('<tr>');
				for (z = 0,c = m[y]; z < 6; ++z) {
					b = m[z];
					d = z==5&&x!=2&&x!=5?';border-right:none;':'';
					e = y ==5&&x<3?';border-bottom:none':'';
					f='#'+a+b+c;
					Html.push('<td style="background:'+f+d+e+'" title="'+f+'">'+T+'');
				};
				Html.push('')
			};
			Html.push('');
			if(m[x]=='66')Html.push('<tr>')
		};
		Html.push('');
		this.win.innerHTML=Html.join('');
		document.body.appendChild(this.win);
		return this
	},
	cellEvent:function (){//为色块添加事件
		var me=this,o={box:'colorCell',view:'colorView',input:'colorValue'};
		this.win.onclick=function (e){	me.stop(e||window.event)};
		for (var Id in o){this[Id]=this.$(o[Id])};
		var tds=this.box.getElementsByTagName("TD");
		for (var i=0;i<tds.length;++i ) {
			o=tds[i];
			if(!o.title)continue;
			o.onclick=function (){me.hide().onclick(this.getAttribute('title'))};
			o.onmouseover=function (){
				me.input.value=me.view.style.background=me.view.title=this.getAttribute('title');
			}
		};
		this.input.onkeyup=function (e){
			var key=(e||event).keyCode;
			if(/[x2E-xff]/.test(String.fromCharCode(key)))
				this.value='#'+this.value.replace(/^#?(.{0,6}).*$/i,'$1').replace(/[^da-f]/ig,'f');
			if(/^#?([da-f]{3}|[da-f]{6})$/i.test(this.value)){
				var color=('#'+this.value.replace(/#/g,'').replace(/^(.)(.)(.)$/,'$1$1$2$2$3$3')).toUpperCase();
				me.view.style.background=me.view.title=color;
				if(key==13)return me.hide().onclick(this.value=color);
			}
		};
		this.view.onclick=function (){me.hide().onclick(this.title)}
		return this;
	},
	pos:function (el){//取元素位置
		var x=0,y=0;
		while(el){x+=el.offsetLeft;y+=el.offsetTop;el=el.offsetParent};
		return {x:x,y:y}
	},
	show:function (x,y){//定位显示面板
		var V=this.win.style;
		V.left=x+'px';
		V.top=y+'px';
		V.display='block';
	},
	hide:function (){this.win.style.display='none';return this},
	bind:function (el){//绑定输入框
		el=this.$(el);
		var me=this,h=el.offsetHeight+1;
		el.onfocus=function (e){
			var pos=me.pos(this);
			me.binder=this;
			me.show(pos.x,pos.y+h);
		};
		el.onclick=function (e){me.stop(e||window.event)};
		this.addEvent(document,'click',function(){me.hide()});
		return this;
	},
	addEvent:function (el,type,fn){//多次添加事件
		el.attachEvent?el.attachEvent('on'+type,function(){fn.call(el)}):
		el.addEventListener(type, fn, false);
	},
	stop: function(_e) {//取消冒泡
		_e.stopPropagation?
		_e.stopPropagation():
		(_e.cancelBubble = true);
	},
	onclick:function (x){//色块点击事件,可以自已添加其它响应.
		this.binder.value=x;
		this.binder.style.background=x;
		document.body.style[this.binder.id=='bb'?'background':'color']=x;
	}
};
ColorPanel.init().bind("bb").bind("bb2");
</script>

提示：您可以先修改部分代码再运行

相关文章

热门栏目