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 相关文章推荐
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
vue实现计步器功能
Nov 01 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邮件专题
2006/10/09 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
js控制input输入字符解析
2013/12/27 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
数组Array的排序sort方法
2017/02/17 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python版微信红包分配算法
2015/05/04 Python
python中zip和unzip数据的方法
2015/05/27 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
JPA的优势都有哪些
2013/07/04 面试题
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
创建文明城市倡议书
2015/04/28 职场文书
亮剑观后感600字
2015/06/05 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书