JavaWeb 模拟QQ分组功能

╰半橙微兮° 2022-04-18 05:42 210阅读 0赞

**一、需求场景**

页面数据分组，点击当前组，其他组关闭，当前组展开。点击每组下面的任意一条消息，进入详情页面，可以对数据进行处理。在数据60秒刷新一次，计算未读消息总数，展示当前最新的10条消息，当数据刷新的时候，用户操作状态保持不变，如果是展开状态，数据刷新后，依然是展开状态，即分组与否保持不变。第一次进入登录进入页面，展开默认的设置状态。

**二、后台提供封装后的数据如下：**

**三、前端**

JSP：

循环添加数据：

JS实现分组功能

/**
     * 解决浏览器不兼容
     */
    // 1 如果浏览器不支持document.getElementsByClassName
    if (!document.getElementsByClassName) {  
    	 // 2 将要写的方法封装成一个函数
    	  document.getElementsByClassName = function (className, element) {  
    		  // 3 获取html中所有的DOM节点 
    	      var children = (element || document).getElementsByTagName('*');    
    	      // 4 用一个空数组存放要获取的class类名
    	      var elements = [];                                                               
    	      for (var i = 0; i < children.length; i++) {
    	          var child = children[i];     
    	          // 5 将所有的class节点保存在一个数组之中
    	          var classNames = child.className.split(' ');   
    	        // 6 遍历循环，将满足要求的class存入elements空数组中
    	          for (var j = 0; j < classNames.length; j++) {                                 
    	              if (classNames[j] == className) {
    	                  elements.push(child);
    	                  break;
    	              }
    	          }
    	      }
    	      // 6 返回新的数组 dom对象的标签数组
    	      return elements;                                                                  
    	  };
    	}
    
    /**
     * 通过js实现动态分组功能
     */
    	//1.点击分组名称可以展开当前分组
    	//2.点击分组名称先关闭其他展开的分组，再展开当前分组
    	//3.如果分组是展开的，点击则关闭分组，如果分组是关闭的，点击则展开分组
    function openDiv(thisobj){
    	
        /*点击分组:
        	如果分组是展开的,点击之后则关闭
        	如果分组是关闭的,点击之后则展开,在展开之前先关闭所有分组,在展开当前分组
        */
       
        // 1 获取当前被点击的a元素后面相邻的div元素
       var div = getNextElement(thisobj);
        
        //console.log(div.style.display);
        //var div=thisobj.parentNode.getElementsByTagName("div")[0];
        // 2 如果当前的对象是展开的状态,则点击进行关闭
        //var $img1 = thisobj.previousSbiling;
        var $img1 = $(thisobj).prev(".xiala")[0]; 
        if(div.style.display=="block"){
            div.style.display="none";
            //$(div).animate({height: 'show'}, 1000);
            $img1.setAttribute("src","${pageContext.request.contextPath}/images/pwr/messageObjectRight.png");
            //$img1.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"; // 用同一张图片调转0度
            //$img1.style.msTransform = "rotate(0deg)";
        }else{
            // 3 如果当前对象是关闭的状态,在展开当前分组之前，先关闭所有分组
            var arrDivs = document.getElementsByClassName("folderDiv");
            for(var i=0;i<arrDivs.length;i++)
            {
            	  var $img2 = $(arrDivs[i]).prev().prev()[0];
            	  $img2.setAttribute("src","${pageContext.request.contextPath}/images/pwr/messageObjectRight.png");
            	   //$img2.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"; // 用同一张图片调转0度
            	  arrDivs[i].style.display="none";
            	   
            }
            // 4 将a元素后面相邻的div元素设置为显示
            
            div.style.display="block";
            $img1.setAttribute("src","${pageContext.request.contextPath}/images/pwr/messageObjectDown.png");
            //$img1.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; // 用同一张图片调转90度
            //$img1.style.msTransform = "rotate(-90deg)"; 
     
        }
    
    }
    
    /**
     * 获得兄弟元素 用jquery中next获取，IE无法兼容，故js封装函数来获取
     */
    function getNextElement(node){
        var NextElementNode = node.nextSibling;
        while(NextElementNode.nodeValue != null){
            NextElementNode = NextElementNode.nextSibling
        }
        return NextElementNode;
    }
    
    /**
     * 通过标签的id和className来获得标签的数据
     */
    function compatibleID(id,classname){//封装语句  
        //支持getElementsByClassName的情况下  
        if(document.getElementsByClassName){  
            if(id){//有ID的情况下  
                var arrId=document.getElementById(id); 
                    return arrId.getElementsByClassName(classname); 
            }else{  
                return document.getElementsByClassName(classname);  
            }  
        }else{//不支持getElementsByClassName的情况下  
            if(id){  
                var arrId=document.getElementById(id);  
                var dom=arrId.getElementsByTagName("*");  
                var arr=[];  
                for(var i=0;i<dom.length;i++){  
                    var txtArr=dom[i].className.split(" ");  
                    for(var j=0;j<txtArr.length;j++){  
                        if(txtArr[j]==classname){  
                            arr.push(dom[i]);  
                        }  
                    }  
                }  
                return arr;  
            }  
        }  
    } 
    
    function getImageAttr(){
    	 var arrDivs = document.getElementsByClassName("xiala");
    	 if(arrDivs.length > 0){
    		 for(var i=0;i<arrDivs.length;i++)
    	     {
    	     	  var $img = $(arrDivs[i]);
    	     	  var index=$img.attr("src").lastIndexOf("\/");
    	     	  var imgName = $img.attr("src").substr(index+1); 
    	     	  var type =  $img.attr("name");
    	     	  if(imgName.replace(/\s*/g,"") === "messageObjectDown.png"){
    	     		 document.cookie = "type="+type+";path=/";
    	     		 document.cookie = "img="+imgName+";path=/";   
    	     		 
    	     	  }
    	     }
    	 }
    }
    
    
    function deleteCookie(name)
    {
    	var exp = new Date();
    	exp.setTime (exp.getTime() - 1);
    	var cval = getCookie (name);
    	document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
    }

**四、功能页面展示 **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDY4ODEy_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDY4ODEy_size_16_color_FFFFFF_t_70]: /images/20220418/d99301d08cae40149245a4063bd2dcf3.png