（H5）window点击动图添加覆盖DIV

最近有个需求，就是在h5生成的文章中点击动图添加个标志，全部动图点击完以后要做其它操作，虽然不难，但是用到的知识点还是挺综合的。

效果如下

window.onclick=function (e) {

 //获取点击区域的tag(标签)：可以获取点击处的标签，比如点击的是div还是img（没用到记录下，以免以后用到）
 //var tagName = (e.target).tagName;

 //获取图片的路径（获取图片的全路径）
  var imgSrc = (e.target).src;

  //class是descDiv的个数（因为点击增加的className叫descDiv）
   var count = $(".descDiv").length;
  //获取所有动图数（调用获取所有动图的方法）
   var imgCount =  findImg();
   //用于判断点击的地方是否获取到图片路径，如果没有表示没有点击的不是IMG标签；点击增加的div小于所有动图数才进入此方法，避免一直狂点
   if(imgSrc !== undefined && count < imgCount){
	 if(checkImg(imgSrc) === true){//调用判断是否是动图的方法
	   if(count === imgCount-1){//imgCount-1是因为最后一次点击时获取的count数还是上次增加完的，所以imgCount-1
		alert("全部完成的操作");
		}
               createDiv(getMousePos().y);//调用增加DIV的方法 & 获取点击处的坐标的方法
	     }
	}
 }
          //获取ID为content下的所有图片路径方法
            function findImg() {

                //获取ID为content里面的所有img（可根据自己的需求获取某个区域的图片路径）
                var imglist=$("#content img");
                var strImg = "";
                for(var i=0;i<imglist.length;i++){//把所有路径拼接成字符串
                    if(imglist[i].getAttribute('src')){
                        strImg = strImg + "\r\n" + imglist[i].getAttribute('src');
                    }
                }
                  //toLowerCase()(全部转为小写，为了不区分大小写)
                  //split(".gif").length-1获取gif的个数，可根据需求更改为其他的
                var count = strImg.toLowerCase().split("gif").length-1;//获取gif在字符串的个数，可得动图的数量
		  return count;
            }

            //在点击处添加div的方法
            function createDiv(y){
                //首先创建div
                var descDiv = document.createElement('div');
                //div添加到body
                document.body.appendChild(descDiv);
                //计算div的确切位置
                var seatX = (($(document).width())/2)-(4*16/2);//横坐标（我是把div居中了）
                var seatY = y;//纵坐标
                //给div设置样式，比如大小、位置
                var cssStr = "z-index:1;width:4rem;height:2rem;color:yellow;background-color:red;" +
					"line-height: 2rem;text-align:center;position:absolute;left:"
                    + seatX + 'px;top:' + seatY + 'px;';
                //将样式添加到div上，显示div
                descDiv.style.cssText = cssStr;
                descDiv.innerHTML = '新增DIV'//需要添加DIV的文字
                descDiv.className = 'descDiv';
                descDiv.style.display = 'block';
            }


            //判断是否是动图
            function checkImg(imgUrl){
                var index= imgUrl.lastIndexOf("."); //得到最后"."在第几位
                var imgSuffix = imgUrl.substring(index+1); //截断"."之前的，得到后缀

                if(imgSuffix.toLowerCase() === "gif"){ //根据后缀，判断是否是动图（灵活运用，更根据需求改）
		     return true;
                }else {
                    return false;
		}
            }

            //获取页面的滑动坐标（不是根据屏幕的大小获取，而是根据页面大小获取）
            function getMousePos(event) {
                var e = event || window.event;
                var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
                var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
                var x = e.pageX || e.clientX + scrollX;
                var y = e.pageY || e.clientY + scrollY;
                return { 'x': x, 'y': y };
            }

结语：虽然要求不难，但是因本人是新人很多东西不懂，当时只是想到一个思路该怎么做，但是很多知识是点不清楚，所以也去看了不少资料，才能做出来，所以记录下以便帮助需要的人。我个人觉得知识点的综合运用还是挺不错的。本人是新手，希望大佬看到不要投来鄙视的眼神，而是投来鼓励的眼神。