需求：
点击三个按钮，页面出现不同数量的“灯”
所有的灯有相同的点击效果。点击一个灯的时候，this和他的上下左右都会变成另一种背景色。
代码在这里~~~
文章地址 https://www.cnblogs.com/sandraryan/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { text-align: center; } .wrap{ /* 500px; */ margin: 30px auto; } .wrap>div{ border-radius: 50%; box-sizing: border-box; /* 50px; height: 50px; */ border: 1px solid pink; background: #000; display: inline-block; text-align: center; line-height: 50px; } button { width: 100px;height: 50px;background-color: white; outline: none;padding: 0 10px;border: 1px solid lightgray; border-radius: 8px;font-size: 20px;color: gray; } </style> </head>
<body>
<div class="wrap"></div>
<button id="btn1">初级</button>
<button id="btn2">中级</button>
<button id="btn3">高级</button>
<script>
//获取元素
var wrap=document.getElementsByClassName("wrap")[0];
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
var divarr=[];
//行 列
var row=5;col=6;
//小div设置宽高
var w=50 ,h=50;
function creat(){
//给外部盒子添加宽度
wrap.style.width=col * w +"px";
//循环创建100个div
for(var i=0;i<col *row;i++){
//动态创建div
var newdiv=document.createElement("div");
//给创建的小盒子设置样式
newdiv.style.width=w+"px";
newdiv.style.height=h+"px";
//给div中写数字
newdiv.innerText=i;
//把创建好的div放到wrap中
wrap.appendChild(newdiv);
//把100个div放到数组里
divarr.push(newdiv);
}
}
creat();
//改变颜色函数
function changebg(s){
var bg = getComputedStyle(s).backgroundColor;
if(bg=="rgb(0, 0, 0)"){
s.style.backgroundColor="yellow";
}else{
s.style.backgroundColor="black";
}
}
//封装点击事件
function clickBox(){
for(var j=0;j<divarr.length;j++){
divarr[j].onclick=function(){
//给当前元素绑定点击事件
changebg(this);
var index = divarr.indexOf(this);
if(index > (col -1)){
changebg(divarr[index-col]);
//top
}
if(index < (row -1)*col) {
changebg(divarr[index + col]);
//bottom
}
if(index % col != 0){
changebg(divarr[index-1]);
}
//left
if(index % col != 0){
changebg(divarr[index+1]);
}
//right
}
}
}
clickBox();
// 选择灯数量的函数
function resetGame(){
wrap.innerHTML = "";
// 清空页面元素
divarr = [];
// 清空数组
creat();
// 重新创建新元素
clickBox();
// 重新绑定点击事件
}
btn1.onclick = function(){
col = 3; row = 3;
resetGame();
}
btn2.onclick = function(){
col = 8; row = 8;
resetGame();
}
btn3.onclick = function(){
col = 10; row = 9;
resetGame();
}
</script>
</body>
</html>
ps 这个效果有点想windows日历选中一个时间的样子~~~