87,901
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>demo</title>
<style type="text/css">
#map{ border:1px solid #ccc; width:220px;}
#map div span{display:inline-block; width:20px; height:20px; border:1px solid #eee;}
</style>
</head>
<body>
<div id="map"></div>
<input type="button" id="button2" value="开始">
</body>
<script type="text/javascript">
var initRow = 5, initCol = 5;
var $ = function(id) {
return document.getElementById(id);
};
$("map").innerHTML = new Array(11).join("<div>" + new Array(11).join("<span></span>") + "</div>");
$("button2").onclick = function() {
var wallNum = 15;
while (wallNum !== 0) {
var row = parseInt((Math.random() * 10));
var col = parseInt((Math.random() * 10));
if (row !== initRow || col !== initCol) {
buildingWall(row, col, "darkgrey");
}
wallNum--;
}
return false;
};
function buildingWall(row, col, color) {
var elem = $("map").getElementsByTagName("div")[row].getElementsByTagName("span")[col];
elem.style.backgroundColor = color;
}
</script>
</html>