颜色选择器（一）

最新推荐文章于 2023-04-22 17:18:28 发布
RequestMaping
最新推荐文章于 2023-04-22 17:18:28 发布
阅读量588
点赞数
本文链接：https://blog.csdn.net/sl369777/article/details/14155217
版权
<!DOCTYPE HTML>
<html>
<head>
<style>
#colorpicker-yw {
	width: 310px;
	height: 230px;
	background-color: #FBFBFB;
	border: 1px solid #FDE436;
	z-index:9999;
	position:absolute;
}

#colorpicker-yw table {
	width: 100px;
	height: 100px;
	float: left;
	margin: 0;
	padding: 0;
}

#colorpicker-yw table td {
	border-color: white;
	border-style: solid;
	width: 15px;
	height: 15px;
}
</style>
<script type="text/javascript">
	(function() {
		var yw = yw || {};
		//模板函数
		function template(temp, inner) {
			return temp.replace(/\{(\w+)\}/g, function(a, b) {
				if (typeof inner[b] == 'function') {
					return inner[b]();
				}
				return inner[b];
			});
		}
		//返回上一个节点
		function prev(node,n){
		    n = n || 0;
		    var elem, i = 0;
		    while ((node = node.previousSibling)){
			    if (node.nodeType && node.nodeType == 1){
				    elem = node;
					if (i == n) break;
					i++;
				}
			}
			return elem;
		}
		//得到DOM对象的位置
		function getBox(el){
		    var x = y = 0, tmp =el;
			do {
			    x += tmp.offsetLeft;
			    y += tmp.offsetTop;			
		    }while(tmp = tmp.offsetParent);
		    return [x,y,el.offsetWidth,el.offsetHeight];
		}
		//rgb(0, 0, 0)转换为16进制
		function rgbToColor(rgb){
		    var color = "";
			var reg = new RegExp(/rgb\((\d{1,3})\,\s+(\d{1,3})\,\s+(\d{1,3})\)/gi);
			var r = rgb.replace(reg,"$1 $2 $3").split(" ");
			for(var i = 0; i < 3; i++) {
                var num = parseInt(r[i]);
                color += num < 16 ? "0" + num.toString(16) : num.toString(16);
            }
			return "#" + color.toUpperCase();
		}
		yw = {
			init : function() {
			    //解决火狐存在的不传入参数，不识别Event
			    var e = arguments.callee.caller.arguments[0] || window.event;
			    this.parent = e.srcElement || e.target;
				this.load(this.parent);
			},
			load : function(parent) {
                if (this.colorContainer){
				    this.colorPanel.style.display = '';
				}else{
				    this.create();
				}
				var position = getBox(parent);
				this.colorPanel.style.top = position[1] + position[3] + "px";
				this.colorPanel.style.left = position[0] + "px"; 
				this.addEvent(this.colorContainer, 'click', click);
				var that = this;
				function click(e){
				    e = e || window.event;
					var elem = e.srcElement || e.target;
					if(elem.nodeName === 'TD'){
					    parent.setAttribute('value', rgbToColor(elem.style.backgroundColor));
						that.colorPanel.style.display = 'none';
					}
					//移除当前事件，防止对象重复
					that.removeEvent(that.colorContainer, 'click', click);
				}
			},
			create : function() {
				this.colorContainer = document.createElement('div')
				var  colorShow = document
						.createElement('input'), colorBackground = document
						.createElement('div');
				this.colorPanel = document.createElement('div');
				this.colorPanel.id = 'colorpicker-yw';
				colorShow.style.cssText = 'width:60px;height:20px;float:left;';
				colorShow.setAttribute('type', 'text');
				colorShow.setAttribute('value', '#111111');
				colorBackground.style.cssText = 'width:50px;margin-top:3px;height:20px;float:left;background-color:#444444;margin-left:50px;';
				document.body.appendChild(this.colorPanel);
				this.colorContainer.innerHTML = this.color();
				this.colorPanel.appendChild(colorShow);
				this.colorPanel.appendChild(colorBackground);
				this.colorPanel.appendChild(this.colorContainer);
				var that = this;
				this.addEvent(this.colorContainer, 'mousemove', debounce(move, 10));
				that.tableArray = this.colorContainer.getElementsByTagName('table');
				function move(e) {
					e = e || window.event;
					var elem = e.srcElement || e.target;
					if (that.elem && that.elem !== elem) {
					    changeBorder(that.elem, 'white');
					}
					that.elem = elem;
					changeBorder(elem, 'black');
					stop(e);
				}
			    function changeBorder(elem, color){
                    if(elem.nodeName !== 'TD') return ;				
				    var prevNode = prev(elem);
					prevNode&&(prevNode.style.borderRightColor = color);
					var overIndex = elem.getAttribute("index");
					var z = Math.ceil(overIndex / 36);
					var x = Math.ceil((overIndex%36) / 6) == 0 ? 6 :  Math.ceil((overIndex%36) / 6);
					var y = (overIndex%36) % 6 == 0 ? 6 : (overIndex%36) % 6;
					if(x >= 2){
					    that.tableArray[z - 1].rows[x - 2].cells[y - 1].style.borderBottomColor = color;
					}
					if(!(z == 1 || z == 4) && y == 1){
					    that.tableArray[z - 2].rows[x - 1].cells[5].style.borderRightColor = color;
					}
					if(z > 3 && x == 1){
					    that.tableArray[z - 4].rows[5].cells[y - 1].style.borderBottomColor = color;
					}
					elem.style.borderColor = color;
					colorBackground.style.backgroundColor = elem.style.backgroundColor;
					colorShow.setAttribute('value', rgbToColor(elem.style.backgroundColor));
				}
				//阻止事件冒泡
				function stop(e) {
					e = e || window.event;
					if (e.stopPropagation) { //W3C
						e.stopPropagation();
					} else {
						e.cancelBubble = true; //IE 
					}
				}
				//函数去抖
				function debounce(func, wait) {
					var timeout, result;
					return function() {
						var context = this, args = arguments;
						var later = function() {
							result = func.apply(context, args);
						}
						clearTimeout(timeout);
						timeout = setTimeout(later, wait);
					}
				}
				/**
				 取消默认事件事件
				 function eventHandler(e) {
				 e = e || window.event;
				 // 防止默认行为
				 if (e.preventDefault) {
				 e.preventDefault();//IE以外
				 } else {
				 e.returnValue = false;//IE
				 //注意：这个地方是无法用return false代替的
				 //return false只能取消元素
				 }
				 }
				 */
			},
			locate : function() {
			},
			color : function() {
				var tdTemp = "<td index='{index}' style='background-color:{fixColor};border-width:{fixWidth}'></td>";
				var colorTable = [ "<div style = 'clear:both;'>", "</div>" ];
				var rcolor = 0, dcolor, bcolor = 0;
				for ( var p = 0; p < 6; p++) {
					var colorArr = [ "<table cellspacing='0' cellpadding='0'>",
							"</table>" ];
					rcolor = bcolor;
					for ( var i = 0; i < 6; i++) {
						dcolor = rcolor;
						var tempRow = [ "<tr>", "</tr>" ];
						for ( var j = 0; j < 6; j++) {
							var fixNum = dcolor.toString(16), fixColor = "", fixWidth = ['0','1px','1px','0'];
							fixColor = "000000" + fixNum;
							fixColor = "#"
									+ fixColor.substr(fixColor.length - 6,
											fixColor.length);
							if (p < 3 && i == 0){
							    fixWidth[0] = '1px';
							}
							if ((p == 0 || p == 3) && j == 0){
							    fixWidth[3] = '1px';
							}
							tempRow.splice(j + 1, 0, template(tdTemp, {
								fixColor : fixColor,
								fixWidth : fixWidth.join(" "),
								index : p*36 + i * 6 + j + 1
							}));
							dcolor += 13056; //3300   3*16*16*16+3*16*16
						}
						colorArr.splice(i + 1, 0, tempRow.join(""));
						rcolor += 51; //33
					}
					bcolor += 3342336; //330000
					colorTable.splice(p + 1, 0, colorArr.join(""));
				}
				return colorTable.join("");
			},
			addEvent : function(elem, type, func) {
				if (elem.addEventListener) {
					elem.addEventListener(type, func, false);
				} else if (elem.attachEvent) {
					elem.attachEvent('on' + type, func);
				}
			},
			removeEvent : function(elem, type, func) {
				if (elem.removeEventListener) {
					elem.removeEventListener(type, func, false);
				} else if (elem.detachEvent) {
					elem.detachEvent('on' + type, func);
				}
			}
		};
		window.ywColorPicker = yw;
	})();
</script>
</head>
<body>
<input style = "width:100px;"  id = "a" onclick = "ywColorPicker.init();"/>
<input style = "width:100px;"  id = "b" onclick = "ywColorPicker.init();"/>
<p>测试位置</p>
<p>测试位置</p>
测试位置位置<input style = "width:100px;"  id = "b" onclick = "ywColorPicker.init();"/>
</body>
</html>