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


Posted in Javascript onFebruary 10, 2020

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

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

代码如下:

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>聊天对话框</title>
<style type="text/css">
#container{
width: 250px;
height: 350px;
border:1px solid #7b6b6b;
margin: 0 auto;
position: relative;

}

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

}

#content ul{
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:1px solid #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;

}

</style>
</head>
<body>

<div id="container">
<div id="content">
<div id="scroll">
<ul id="save"></ul>
</div>
</div>

<div id="edit">
<img src="1.jpg" id="Img">
<input type="text" name="" id="txt">
<input type="button" name="" value="发送" id="btn">
</div>
</div>
<script type="text/javascript">

 //获取元素

var oCont=document.getElementById('content');
var oImg=document.getElementById('Img');
var oTxt=document.getElementById('txt');
var oBtn=document.getElementById('btn');
var oSTxt=document.getElementsByClassName('showTxt');
var oSave=document.getElementById('save');
var num=0;

 //切换头像
oImg.οnclick=function(){
num++;
if(num%2==0)
oImg.src='1.jpg';
else
oImg.src='2.jpg';

}

 //发送事件
oBtn.οnclick= function(){
addCon();

}

function addCon(){ 
//定义需要添加的元素
var newLi=document.createElement("li");
var newImg=document.createElement('img');
//判断聊天的对象是哪一方,文字框出现在左边还是右边
 if(num%2==0){
//添加对话框
newLi.innerHTML=oTxt.value;
newLi.className='showTxt right';
oSave.appendChild(newLi); 
oTxt.value='';
 //添加头像
newImg.src=oImg.src;
newImg.className='showImg rightImg';
newLi.appendChild(newImg); 

 //清除浮动
var div = document.createElement('div');
 div.style = 'clear:both';
 oSave.appendChild(div);
 }else{
 newLi.innerHTML=oTxt.value;
newLi.className='showTxt left';
oSave.appendChild(newLi); 
oTxt.value='';
newImg.src=oImg.src;
newImg.className='showImg leftImg';
newLi.appendChild(newImg);
var div = document.createElement('div');
 div.style = 'clear:both';
 oSave.appendChild(div);

 }

}

</script>
</body>
</html>

页面结果如图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习网址备忘
May 29 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 #Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 #Javascript
js实现登录拖拽窗口
Feb 10 #Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 #Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 #Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 #Javascript
webpack打包优化的几个方法总结
Feb 10 #Javascript
You might like
php下过滤HTML代码的函数
2007/12/10 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
python 调用HBase的简单实例
2016/12/18 Python
python一键升级所有pip package的方法
2017/01/16 Python
Python中查看文件名和文件路径
2017/03/31 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python如何输出百分比
2020/07/31 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
商务英语专业应届毕业生求职信
2013/10/28 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
三字经教学反思
2014/04/26 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
给客户的检讨书
2014/12/21 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS