好资源导航 » 文章资讯 » JavaScript实现简易聊天对话框(加滚动条)

JavaScript实现简易聊天对话框(加滚动条)

2023-08-01 20:18:04 153

今天看了几个JS的视频，老师布置了一个编写一个简易聊天对话框的任务，没有涉及到Ajax.主要实现了切换头像模拟两方的聊天情况，样式比较简单，后期可以进行美化。

需要注意的地方是我是用的ulli列表来实现元素的添加，这样更利于样式的设置，每添加一个对话框需要清除一下浮动，不然会出现连续几个对话框出现在一行的现象。

代码如下：







聊天对话框

#container{
width:250px;
height:350px;
border:1pxsolid#7b6b6b;
margin:0auto;
position:relative;

}

#content{
width:250px;
height:300px;
border-bottom:1pxsolid#ccc;
overflow-y:auto;

}

#contentul{
margin:0;
padding:0;

}

#Img{
width:30px;
height:30px;
position:absolute;
left:10px;
top:310px;
border-radius:15px;

}

#txt{
margin:0;
position:absolute;
left:50px;
top:315px;
border-radius:2px;
border:1pxsolid#ccc;
width:133px;
height:18px;

}

#btn{
margin-right:10px;
position:absolute;
margin:0;
left:197px;
top:314px;

}

#edit{
background:#ece7e766;
width:250px;
height:50px;

}

.showTxt{
width:auto;
height:auto;
max-width:230px;
background:#008000a8;
border:0;
font-size:15px;
color:white;
padding:5px;
border-radius:2px;
word-break:break-all;
list-style:none;
margin-top:5px;
display:list-item;

}

.left{
text-align:left;
margin-left:50px;
float:left;

}

.right{
text-align:right;
margin-right:50px;
float:right;

}

.showImg{
width:26px;
height:26px;
border-radius:13px;



}

.leftImg{
left:10px;
position:absolute;

}

.rightImg{
right:10px;
position:absolute;

}

#scroll{
position:relative;

}

//获取元素 varoCont=document.getElementById('content'); varoImg=document.getElementById('Img'); varoTxt=document.getElementById('txt'); varoBtn=document.getElementById('btn'); varoSTxt=document.getElementsByClassName('showTxt'); varoSave=document.getElementById('save'); varnum=0; //切换头像 oImg.οnclick=function(){ num++; if(num%2==0) oImg.src='https://www.haoziyuan.cc1.jpg'; else oImg.src='2.jpg'; } //发送事件 oBtn.οnclick=function(){ addCon(); } functionaddCon(){ //定义需要添加的元素 varnewLi=document.createElement("li"); varnewImg=document.createElement('img'); //判断聊天的对象是哪一方，文字框出现在左边还是右边 if(num%2==0){ //添加对话框 newLi.innerHTML=oTxt.value; newLi.className='showTxtright'; oSave.appendChild(newLi); oTxt.value=''; //添加头像 newImg.src=oImg.src; newImg.className='showImgrightImg'; newLi.appendChild(newImg); //清除浮动 vardiv=document.createElement('div'); div.style='clear:both'; oSave.appendChild(div); }else{ newLi.innerHTML=oTxt.value; newLi.className='showTxtleft'; oSave.appendChild(newLi); oTxt.value=''; newImg.src=oImg.src; newImg.className='showImgleftImg'; newLi.appendChild(newImg); vardiv=document.createElement('div'); div.style='clear:both'; oSave.appendChild(div); } }

页面结果如图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JavaScript实现简易聊天对话框(加滚动条)

热门推荐

随机推荐