关灯小游戏
贡献者:随风前行
类别:代码 时间: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'
}
}
}
声明:以上文章均为用户自行添加,仅供打字交流使用,不代表本站观点,本站不承担任何法律责任,特此声明!如果有侵犯到您的权利,请及时联系我们删除。