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创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 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的几个常用数字判断函数代码
2012/04/24 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
python二叉树的实现实例
2013/11/21 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python3爬虫学习入门教程
2018/12/11 Python
Python for循环与range函数的使用详解
2019/03/23 Python
Flask配置Cors跨域的实现
2019/07/12 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
通过Python实现一个简单的html页面
2020/05/16 Python
python要安装在哪个盘
2020/06/15 Python
Python reques接口测试框架实现代码
2020/07/28 Python
提高python代码运行效率的一些建议
2020/09/29 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
店长助理岗位职责
2013/12/13 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
小区文明倡议书
2014/05/16 职场文书
创先争优宣传标语
2014/10/08 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书