前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >5月14日项目小结-获取与增加html节点

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

作者头像
WindCoder
发布2018-09-20 16:18:50
6670
发布2018-09-20 16:18:50
举报
文章被收录于专栏:WindCoderWindCoder

需要实现类似聊天的功能,找了半天没找到满意的,只好手动用最笨的方式通过在<ul></ul>中添加<li>相关节点实现。此处代码仅作为实现思路,若是照搬不保证最终实现样式。

纯纯的无<li>时的代码

<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>

其中<span id="chushi"></span>作为添加第一个<li>节点时的参照。

增加节点的js代码

增加节点的js代码

		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);

		}

每一个新节点<li>的id为"xinxi+节点号",如一号节点(即<ul>中的第一个<li>)的id为"xinxi1".

html节点格式为

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

 部分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;}

项目实例截图

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-05-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 纯纯的无<li>时的代码
  • 增加节点的js代码
  •  部分css样式
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档