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弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 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 分页函数multi() discuz
2009/06/21 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
Python实现的彩票机选器实例
2015/06/17 Python
python使用fork实现守护进程的方法
2017/11/16 Python
python如何安装下载后的模块
2020/07/03 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
文明风采获奖感言
2014/02/18 职场文书
节约用水演讲稿
2014/05/21 职场文书
大学生求职信范文
2014/05/24 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang