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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
html中两种获取标签内的值的方法
Jun 16 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+mysql留言本源码
2009/11/11 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php curl_init函数用法
2014/01/31 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
Vue的Options用法说明
2020/08/14 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
Python错误处理操作示例
2018/07/18 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
应届行政管理专业个人自我评价
2013/12/28 职场文书
运输服务质量承诺书
2014/03/27 职场文书
春季防火方案
2014/05/10 职场文书
建设工地安全标语
2014/06/07 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android