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 相关文章推荐
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
原生js开发的日历插件
Feb 04 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
简单谈谈原生js的math对象
Jun 27 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
jquery插件实现代码雨特效
Apr 24 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
使用PHP批量生成随机用户名
2008/07/10 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php写app用的框架整理
2019/09/29 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
windows下python和pip安装教程
2018/05/25 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
大学生的创业计划书就该这么写
2014/01/30 职场文书
合作意向书范本
2014/03/31 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
大学生实训报告总结
2014/11/05 职场文书
工人先锋号申报材料
2014/12/29 职场文书
学期个人工作总结
2015/02/13 职场文书
会计试用期自我评价
2015/03/10 职场文书
单位收入证明范本
2015/06/18 职场文书
Python机器学习之基础概述
2021/05/19 Python
Python 中random 库的详细使用
2021/06/03 Python
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python