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
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
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为"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”]
项目实例截图[/caption]
Preview
除特别注明外，本站所有文章均为 Windcoder网 原创，转载请注明出处来自： 5-yue-14-ri-xiang-mu-xiao-jie-huo-qu-yu-zeng-jia-html-jie-dian
Loading comments...
Preview
No Data