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个，解决思路：

如我for循环的那样都加个 1

不用input标签创建按钮，用button标签创建按钮
button标签创建的按钮需用butsNode.textContent = color;来设置按钮上显示的文字

不用input标签创建文本框，用什么随便代替下吧，反正没有text标签

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

看看效果图：

小结：

通过new Array('ff', 'cc', '99', '66', '33', '00');来创建数组。

通过document.createElement("input");创建input标签。

通过butsDivNode.appendChild(butsNode );将input标签变为div下的子节点

通过document.getElementById("butsDiv");获取标签。

通过this.getAttribute("value");来获取每个当前按钮的value值

通过document.getElementsByTagName("input");来获取一个input标签集合
然后需要通过循环将其一一遍历到

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

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

猜你喜欢