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 相关文章推荐
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
OpenLayers实现图层切换控件
Sep 25 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模板技术[转]
2007/01/04 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
ExtJS 入门
2010/10/29 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
Python列表推导式的使用方法
2013/11/21 Python
Python的动态重新封装的教程
2015/04/11 Python
Python实现字典依据value排序
2016/02/24 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
python numpy实现rolling滚动案例
2020/06/08 Python
python Gabor滤波器讲解
2020/10/26 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
Ibatis的核心配置文件都有什么
2014/09/08 面试题
可靠的数据流传输TCP
2016/03/15 面试题
员工试用期考核自我鉴定
2014/04/13 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
学校就业推荐信范文
2014/05/19 职场文书
导游词300字
2015/02/13 职场文书