寻找徐峥的小游戏

**

封装的一个新建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>

本文地址：https://blog.csdn.net/guociaxia48/article/details/107883076