关灯小游戏

贡献者：随风前行

类别：代码 时间：2016-09-10 19:12:55 收藏数：11 评分：0

返回上页

举报此文章

请选择举报理由：

广告/谣言/欺诈

政治敏感

色情/违法信息

垃圾文章

其他

收藏到我的文章

改错字

关灯游戏

#wrap {

width: 600px;

height: 600px;

position: relative;

margin: 150px auto;

}

#aaaa{

width: 100px;

height: 20px;

font-size: 20em;

}

//获取wrap div

var wrap = document.getElementById('wrap');

//定义空数组，保存所有light

var lights = [];

for(var i = 0; i < 7; i++) {

for(var j = 0; j < 5; j++) {

var aLight = document.createElement('div');

// 为wrap 添加自标签

wrap.appendChild(aLight);

//同时将aLight保存在lights数组中

lights.push(aLight);

//设置aLight的样式

aLight.style.width = "10%";

aLight.style.height = "10%";

aLight.style.border = '1px solid gray';

aLight.style.backgroundColor = 'black';

aLight.style.position = "absolute";

aLight.style.left = j * 10 + '%';

aLight.style.top = i * 10 + '%';

aLight.index = lights.length - 1;

aLight.onclick = function() {

//首先改变当前点击的颜色

//event.target 是指当前正在接受事件的对象，如果是点击div，则就是被点击的div本身

var currentLight = event.target;

if(currentLight.style.backgroundColor == 'black') {

currentLight.style.backgroundColor = 'yellow';

} else {

currentLight.style.backgroundColor = 'black';

}

//获取上边的灯

if(currentLight.index >= 5) {

var topLight = lights[currentLight.index - 5];

topLight.style.backgroundColor =

(topLight.style.backgroundColor == 'black') ? 'yellow' : 'black';

}

//获取下边的灯

if(currentLight.index < 30) {

var bottomLight = lights[currentLight.index + 5]

bottomLight.style.backgroundColor =

(bottomLight.style.backgroundColor == 'black') ? 'yellow' : 'black';

}

if(currentLight.index % 5 != 0) {

var leftLight = lights[currentLight.index - 1];

leftLight.style.backgroundColor =

(leftLight.style.backgroundColor == 'black') ? 'yellow' : 'black';

}

if(currentLight.index % 5 != 4) {

var rightLight = lights[currentLight.index + 1];

rightLight.style.backgroundColor =

(rightLight.style.backgroundColor == 'black') ? 'yellow' : 'black';

}

}

}

}

var aaaa = document.getElementById('aaaa');

aaaa.onclick = function() {

for(var i = 0; i < 35; i++) {

if (lights[i].style.backgroundColor == 'yellow') {

lights[i].style.backgroundColor = 'black';

//lights[i].style.transitionDuration = '300ms'

}

}

}

声明：以上文章均为用户自行添加，仅供打字交流使用，不代表本站观点，本站不承担任何法律责任，特此声明！如果有侵犯到您的权利，请及时联系我们删除。