Web笔记··By/蜜汁炒酸奶

5月14日项目小结-获取与增加html节点

需要实现类似聊天的功能,找了半天没找到满意的,只好手动用最笨的方式通过在

    中添加
  • 相关节点实现。此处代码仅作为实现思路,若是照搬不保证最终实现样式。

    纯纯的无
  • 时的代码
  • <div id="xiaoxi" style="font-size: 30px;position: absolute;z-index:8;width: 100%;">
        <ul id="ChatContent">
            <span id="chushi"></span>
        </ul>
        <div style="height: 100px"></div>
    </div>
    
    1
    2
    3
    4
    5
    6

    其中作为添加第一个

  • 节点时的参照。

    增加节点的js代码

    [toggle hide=“yes” title=“增加节点的js代码” color=“”]

    function chuanruwenzi(){
    			if($("#wenzi").val().length>0){
    				inum = document.getElementById("ChatContent").getElementsByTagName("li").length;//现节点长度
    				if(inum==0) {
    					snum =inum+1;
    
    					var xin= "#xinxi"+snum;
    					var xinnew = "xinxi"+snum;
    					var xinnews = "#xinxi"+snum;
    					var neinew = "neirong"+snum;
    //增加新节点
    					$("#chushi").after("<li id='"+xinnew+"'class='neirong_zili'><img class='touimg' src="+img+"><span id='"+neinew+"' class='neirong'>"+$("#wenzi").val()+"</span></br></li>");
    					var s = document.getElementById(neinew).offsetHeight-90;
    					$(xinnews).css("padding-bottom",s);
    					//清空输入框
    					var textarea=document.getElementById("wenzi");
    					textarea.value=" ";
    				}else {
    					snum =inum+1;
    					var xin= "#xinxi"+inum;
    					var xinnew = "xinxi"+snum;
    					var xinnews = "#xinxi"+snum;
    					var nei = "neirong"+inum;
    					var neinew = "neirong"+snum;
    //增加新节点
    					$(xin).after("<li id='"+xinnew+"'class='neirong_zili'><img class='touimg' src="+img+"><span id='"+neinew+"' class='neirong'>"+$("#wenzi").val()+"</span></br></li>");
    					var s = document.getElementById(neinew).offsetHeight-90;
    					$(xinnews).css("padding-bottom",s);
    					//清空输入框
    					var textarea=document.getElementById("wenzi");
    					textarea.value=" ";
    				}
    			}
    
    			window.scrollTo(0,document.body.scrollHeight);
    
    		}
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37

    [/toggle] 每一个新节点

  • 的id为"xinxi+节点号",如一号节点(即
      中的第一个
    • )的id为"xinxi1". html节点格式为

      <li id="xinxi1" class="neirong_zili "><img class="touimg" src="img/ceshi/tou.jpg"><span id="neirong1" class="neirong">文本</span></li>
      
      1

      部分css样式

      .none {display: none;}
      			/*背景*/
      			.bg {width: 100%;height: 100%;top: 0;position: absolute;}
      			/*居中*/
      			.center {position: absolute;left: 0;right: 0;margin: auto;z-index: 8;}
      			.touimg{width: 15%;border-radius:40px;}
      			.neirong{width: 46%;position: absolute;padding-left: 2%;background-color: #B1E766;padding: 10px;margin-left: 15px;border-radius:20px;min-height: 65px}
      			.neirong_zili{position: relative;padding-bottom: 3%;}
      			.neirong_imgli{position: relative;padding-bottom: 27%;}
      			.neirong_img{width: 46%;position: absolute;padding-left: 2%;height: auto;}
      			li{list-style-type: none;}
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11

      [caption id=“” align=“aligncenter” width=“319”]WebDom_xiaoxi.jpg 项目实例截图[/caption]

  • Preview
    Loading comments...
    0 条评论

    No Data

    example
    Preview