快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

使用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%;
 }
 h3{
 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%;
 }

主代码:


 
  

聊天室

 
 
        关闭(C)发送(S)
                   

jQuery代码:



 $("#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("
" + $n + ":" + "

" + $nei + "

");        $(".chatBody p").addClass("a");//消息框颜色        $("textarea").val("");//发送框消息消失      }    });  });

看完上述内容,你们对使用jQuery怎么实现一个聊天框有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


分享题目:使用jQuery怎么实现一个聊天框
转载来源:http://6mz.cn/article/gopged.html