js批量创建按钮以及点击事件

因为要在canvas中实现一个取色器的功能，所以就百度找了找有没有什么方法，可以获取鼠标当前位置的颜色，结果就搜到了一段代码。

复制粘贴运行一下，是这样的

这也太单调了吧！

然后我就闲着将其改动了一下：

为每个保护色创建按钮，按钮的background对应相应的颜色，value对应相应的参数

实现完成后，心中又生出一计:

为每个按钮添加一个点击事件，每当鼠标点到一个按钮，这个按钮的将其颜色参数在文本框中显示，同时将文本框所在的div域背景色该变。

当时不想创建每个按钮的id，想直接通过document.getElementsByTagName("input");来获取每个input标签，结果不知道哪里出来问题，还是通过创建每个按钮的id实现了。

<head>
	<style type="text/css">
		input {
			width: 60px;
			height: 30px;
		}
		#butsDiv {
			width: 720px;
		}
		#textDiv{
			width: 720px;
		}
	</style>
</head>
<body>
	<div id="textDiv" >
		<label>取值为：</label><input type="text" id="textColor"  />
	</div>
	<hr />
	<div id="butsDiv" ></div>
	<script type="text/javascript">
	var hex = new Array('ff', 'cc', '99', '66', '33', '00');
	function setButtonsColor() {
		for (var i = 0; i < 6; i++) {
			for (var j = 0; j < 6; j++) {
				for (var k = 0; k < 6; k++) {
					var color = hex[j] + hex[k] + hex[i];
					var butsNode = document.createElement("input");
					butsNode .type = "button";
					butsNode .value = color;
							
					butsNode .id=((k+1)+j*6)+i*36;
					butsNode .style.background = "#" + color;

					var butsDivNode = document.getElementById("butsDiv");
					butsDivNode.appendChild(butsNode );
				}
			}
		}
	}
	function getButtonsValue(){
		for (var i = 0; i < 6; i++) {
			for (var j = 0; j < 6; j++) {
				for (var k = 0; k < 6; k++) {
					//吐槽自己为什么要用三个for循环嵌套，为了和上面创建保护色button形成一致的风格
					var he=((k+1)+j*6)+i*36;
			document.getElementById(he).onmousedown=function(){
						//读取自身的value值
		    document.getElementById("textColor").value="#"+this.getAttribute("value");
						//设置文本框所在div的背景色
			document.getElementById("textDiv").style.background="#"+this.getAttribute("value");
					}
				}
			}
		}
	}	
	setButtonsColor();
	getButtonsValue();
	</script>
</body>

如今我要再次尝试一下，我觉得当时的思路是对的，果然略微改动就可以了。

function getButtonsValue(){
	butts=document.getElementsByTagName("input");
    //为什么x要等于一，因为还有一个input的text文本框，所以不对文本框添加事件
	for(var x=1;x<217;x++){
	    butts[x].onmousedown=function(){
			document.getElementById("textColor").value="#"+this.getAttribute("value");
			document.getElementById("textDiv").style.background="#"+this.getAttribute("value");
		}
	}
}

由于有一个文本框也用了<input>标签创建的所以通过document.getElementsByTagName("input");会获取217个，解决思路：

  1. 如我for循环的那样都加个 1
  2. 不用input标签创建按钮，用button标签创建按钮
    button标签创建的按钮需用butsNode.textContent = color;来设置按钮上显示的文字
  3. 不用input标签创建文本框，用什么随便代替下吧，反正没有text标签

3种思路都是可以的，已经实现了，懒得上代码了

看看效果图：

小结：

  1. 通过new Array('ff', 'cc', '99', '66', '33', '00');来创建数组。
  2. 通过 document.createElement("input");创建input标签。
  3. 通过butsDivNode.appendChild(butsNode );将input标签变为div下的子节点
  4. 通过document.getElementById("butsDiv");获取标签。
  5. 通过 this.getAttribute("value");来获取每个当前按钮的value值
  6. 通过document.getElementsByTagName("input");来获取一个input标签集合
    然后需要通过循环将其一一遍历到

既然神奇搜索引擎安排你搜到这条信息，并且冥冥之中有一股神奇的魔力让你点开了这篇文章，读到了此处......
那么感谢你一下，啦啦啦~

posted @ 2020-01-21 13:37  染墨涂白  阅读(1982)  评论(0)    收藏  举报