javascript实现简易聊天室


Posted in Javascript onJuly 12, 2019

聊天室是我们经常见的,比如微信聊天界面、QQ聊天界面等等,一个简易的聊天室如下:

1.html代码

<div class="content">
 <div class="section"></div>
 <form action="#">
 <textarea id="$value"></textarea>
 <button type="button" id="sub">发送</button>
 </form>
</div>

2.css代码

.content{
 border-radius: 5px;
 border: 2px solid #cccccc;
 width: 500px;
 height: 700px;
 margin: 50px auto 0;
 overflow: hidden;
 }
 .section{
 width: 500px;
 height: 569px;
 overflow-x: hidden;
 overflow-y: auto;
 border-bottom: 1px solid #cccccc; 
 padding-top: 30px;
 }
 .section::-webkit-scrollbar{
 display: none;
 }
 form{
 width: 500px;
 height: 100px;
 }
 form textarea{
 outline: none;
 border: none;
 display: block;
 float: left;
 width: 370px;
 height: 100px;
 font-size: 25px;
 text-align: top;
 line-height: 35px;
 resize: none;
 }
 form button{
 outline: none;
 border: none;
 display: block;
 float: left;
 width: 130px;
 height: 100px;
 }
 form button:active{
 background: #ccc;
 }
 .line{
 width: 500px;
 overflow: hidden;
 }
 .left,.right{
 height: auto;
 font-size: 25px;
 line-height: 50px;
 border-radius: 10px;
 padding: 0 10px;
 overflow-wrap: break-word;
 margin-bottom: 20px;
 }
 .left{
 max-width: 400px;
 margin-left: 20px;
 float: left;
 background: rgb(243, 244, 245);
 }
 .right{
 max-width: 400px;
 float: right;
 margin-right: 20px;
 background: rgb(79, 230, 49);
 }

3.js代码

<script type="text/javascript">
 function $(str){
 if (str[0]=='.') {
  return document.getElementsByClassName(str.substring(1));
 }else if (str[0]=='#') {
  return document.getElementById(str.substring(1));
 }else{
  return document.getElementsByTagName(str); 
 }
 }
 //以上代码可以单独封装成一个函数
 var count = 0;
 $('#sub').onclick=function(){
 //当点击发送按钮后,创建class名为line的盒子,来盛放聊天的内容
 var div = document.createElement('div');
 div.className = 'line';
 $('.section')[0].appendChild(div);
 var str = $('#$value').value;
 var p = document.createElement('p');
 if (count%2==1) {
  p.className = 'left';
 }else{
  p.className = 'right';
 }
 p.innerHTML = str;
 $('#$value').value = '';
 div.appendChild(p);
 count++;
 }
 
</script>

4.效果图

javascript实现简易聊天室

好啦,一个简易的聊天室就制作完啦!

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

Javascript 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 #Javascript
小程序实现短信登录倒计时
Jul 12 #Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 #Javascript
小程序实现分类页
Jul 12 #Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
小程序实现搜索框
Jun 19 #Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 #Javascript
You might like
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
javascript 写类方式之四
2009/07/05 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
python 美化输出信息的实例
2018/10/15 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python新手如何理解循环加载模块
2020/05/29 Python
python 如何设置守护进程
2020/10/29 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
canvas像素画板的实现代码
2018/11/21 HTML / CSS
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
物理教育专业求职信
2014/06/25 职场文书
先进员工获奖感言
2014/08/14 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
三年级学生期末评语
2014/12/26 职场文书
小学教师见习总结
2015/06/23 职场文书
导游词之长城八达岭
2019/09/24 职场文书