jQuery实现简易聊天框


Posted in jQuery onFebruary 08, 2020

本文实例为大家分享了jQuery实现简易聊天框的具体代码,供大家参考,具体内容如下

效果:

jQuery实现简易聊天框

CSS代码:

body{
 margin: 0;
 }
 .kuan{
 height:550px;
 width: 650px;
 background-color: #ccc;
 margin: 80px auto;
 }
 .header{
 width: 100%;
 height: 35px;
 background-color: #00f;
 }
 .chatBody{
 width: 100%;
 height: 70%;
 overflow:auto;
 }
 .footer{
 width: 100%;
 height: 20%;
 }
 h2{
 margin-bottom: 0;
 text-align: center;
 }
 .send{
 background-color: green;
 width: 50px;
 }
 .btn{
 text-align: right;
 }
 .btn span{
 display: inline-block; 
 padding: 0 10px; 
 height: 25px;
   overflow: hidden; 
   color: #fff; 
   border-radius: 5px; 
   background-color: #069dd5; 
   font-size: 12px; 
   margin-right: 3px; 
   cursor:pointer;
  }
  .chatText{
 border: none; 
 width: 100%; 
 height: 50px;
 }
 #input{
 margin-left: 200px;
 width: 100px;
 }
 .a{
   background-color: green; 
   border-radius: 5px;
   width: 200px;
   height: 100%;
 }

主代码:

<div class = "kuan">
 <div class = "header">
  <h2>聊天室</h2>
 </div>
 <div class = "chatBody"></div>
 <div class = "footer">
  <textarea class="chatText"></textarea>
   <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
   <input type = "text" id = "input"></input>
  <input type = "submit" value = "确定" id = "sure"></input>
  <select id = "demo">
  <option value = ""></option>
  </select>
 </div>
 </div>

jQuery代码:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script type="text/javascript">
 $("#demo").change(function(){
  $("#input").val($(this).val());//将下拉框里的内容放到文本框里
 });
 $(document).ready(function(){
   $("#send").click(function(){
     var $nei = $("textarea").val();
     var $n = $("#input").val();
     if($nei.length==""){
       alert("你没写东西啊");
     }else{
       var $currentstr=$(".chatBody").append("<div>" + $n + ":" + "<p>" + $nei + "</p></div>");
       $(".chatBody p").addClass("a");//消息框颜色
       $("textarea").val("");//发送框消息消失
     }
   });
 });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jquery添加div实现消息聊天框
Feb 08 #jQuery
jQuery实现聊天对话框
Feb 08 #jQuery
jquery实现聊天机器人
Feb 08 #jQuery
jQuery实现获取多选框的值示例
Feb 07 #jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 #jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 #jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
You might like
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
《三袋麦子》教学反思
2014/03/02 职场文书
党员干部承诺书范文
2014/03/25 职场文书
绘画专业自荐信
2014/07/04 职场文书
党员个人公开承诺书
2014/08/29 职场文书
六一儿童节标语
2014/10/08 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
Python 如何解决稀疏矩阵运算
2021/05/26 Python
浅谈python中的多态
2021/06/15 Python