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 相关文章推荐
jQuery chili图片远处放大插件
Nov 30 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
js实现动态显示时间效果
Mar 06 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
angular *Ngif else用法详解
Dec 15 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简单实例介绍文件上传
2015/12/16 PHP
php设计模式之单例模式代码
2016/06/11 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
python读写ini配置文件方法实例分析
2015/06/30 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
python实发邮件实例详解
2019/11/11 Python
在python shell中运行python文件的实现
2019/12/21 Python
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
教师旷工检讨书
2014/01/18 职场文书
30年同学聚会感言
2014/01/30 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
领导欢迎词致辞
2015/01/23 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python