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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
简单了解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
PHP4实际应用经验篇(2)
2006/10/09 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
js变量、作用域及内存详解
2014/09/23 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
小程序实现多选框功能
2018/10/30 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
Python中的变量和作用域详解
2016/07/13 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
关于Java finally的面试题
2016/04/27 面试题
剪彩仪式主持词
2014/03/19 职场文书
社区戒毒工作方案
2014/06/04 职场文书
起诉书格式范文
2015/05/20 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
致青春观后感
2015/06/09 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers