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  THIS详解 面向对象
Mar 25 Javascript
Prototype Template对象 学习
Jul 19 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
Vue 监听元素前后变化值实例
Jul 29 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
python读取LMDB中图像的方法
2018/07/02 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
django中ImageField的使用详解
2020/12/21 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
乡镇交通安全实施方案
2014/03/29 职场文书
行政监察建议书
2014/05/19 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
法定代表人身份证明书
2015/06/18 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
高一语文教学反思
2016/02/16 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android