因为要在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标签集合
然后需要通过循环将其一一遍历到
既然神奇搜索引擎安排你搜到这条信息，并且冥冥之中有一股神奇的魔力让你点开了这篇文章，读到了此处......
那么感谢你一下，啦啦啦~
网友评论