欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

寻找徐峥的小游戏

程序员文章站 2022-06-18 19:41:33
**封装的一个新建DOM元素**//Utils.jsvar 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===“s...

**

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

相关标签: js javascript