寻找徐峥的小游戏

**

封装的一个新建DOM元素

**

//Utils.js
var Utils=(function(){
return {
ce:function(type,style,parent){//函数的三个参数分别是要创建的元素类型；样式；以及放入哪个元素中
var elem=document.createElement(type);
if(style){
for(var prop in style){
elem.style[prop]=style[prop];
}
}
if(typeof parent===“string”) parent=document.querySelector(parent);
if(parent) parent.appendChild(elem);
return elem;
}
}
})();

**

html

**
div {
width: 500px;
height: 500px;
border: 1px solid #000000;
font-size: 0;
}// css样式
//引入Utils.js
//DOM <div></div>
<script>
var n = 2,
arr = [];
init();
function init() {
createImageCon(n);
}

function createImageCon(n) {
/*  document.querySelector("div").innerHTML="";
arr.length=0; */
for(var i=0;i<arr.length;i++){
arr[i].remove();
arr[i]=null;
}
arr.length=0;
for (var i = 0; i < n * n; i++) {
var img = Utils.ce("img", {
width: 500 / n + "px",
height: 500 / n + "px",
});
if (i === 0) img.src = "img/1.png";//图片1是徐峥
else img.src = "img/2.png";//图片2是包贝尔
arr.push(img);
img.addEventListener("click", clickHandler);
/*  var url=""
if(!bool)url=Math.random()>0.5 ? "img/1.png" : "img/2.png";
else url="img/2.png";
if(url==="img/1.png") bool=true;
if(!bool && i===n*n-1) url="img/1.png";
console.log(url);
img.src=url; */
}
arr
.sort(function () {
return Math.random() - 0.5;
})
.forEach(function (item) {
document.querySelector("div").appendChild(item);
});
}

function clickHandler(e) {
if (this.src.indexOf("1.png") > -1) {
n++;
}
createImageCon(n);
}
</script>