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 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
从vue源码看props的用法
Jan 09 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 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中header和session_start前不能有输出原因分析
2013/01/11 PHP
PHP使用递归生成文章树
2015/04/21 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
python如何安装下载后的模块
2020/07/03 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
普通大学毕业生自荐信
2013/11/04 职场文书
季度思想汇报
2014/01/01 职场文书
五年级数学教学反思
2014/02/11 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
常住证明范本
2015/06/23 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
Echarts如何重新渲染实例详解
2022/05/30 Javascript