jQuery实现简易聊天框

 更新时间:2020年02月08日 13:54:25   作者:可爱的强强  
这篇文章主要为大家详细介绍了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实现无限分级横向导航菜单的方法

    这篇文章主要介绍了jquery实现无限分级横向导航菜单的方法,实例分析了基于jQuery插件操作html与对应样式实现导航菜单效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jQuery+CSS实现滑动的标签分栏切换效果

    jQuery+CSS实现滑动的标签分栏切换效果

    这篇文章主要介绍了jQuery实现滑动的标签分栏切换效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • jQuery实现侧边栏隐藏与显示的方法详解

    jQuery实现侧边栏隐藏与显示的方法详解

    这篇文章主要介绍了jQuery实现侧边栏隐藏与显示的方法,结合实例形式较为详细的分析了jQuery基于事件响应与页面元素属性动态操作实现元素显示与隐藏功能的相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • jquery简单插件制作(fn.extend)完整实例

    jquery简单插件制作(fn.extend)完整实例

    这篇文章主要介绍了jquery简单插件制作(fn.extend)方法,结合完整实例形式分析了jQuery fn.extend扩展插件的实现技巧,需要的朋友可以参考下
    2016-05-05
  • 基于jquery的可多选的下拉列表框

    基于jquery的可多选的下拉列表框

    同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG,反正多选下拉列表框实现也很简单,与其看那些结构混乱的代码,不如自己重新实现一个
    2012-07-07
  • easyUI使用分页过滤器对数据进行分页操作实例分析

    easyUI使用分页过滤器对数据进行分页操作实例分析

    这篇文章主要介绍了easyUI使用分页过滤器对数据进行分页操作,结合实例形式详细分析了easyUI分页过滤器对数据进行分页操作具体步骤与相关操作技巧,需要的朋友可以参考下
    2020-06-06
  • 详解jQuery的表单验证插件--Validation

    详解jQuery的表单验证插件--Validation

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。本文主要对表单验证插件-Validation进行案例分析,详细介绍,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • jquery 插件学习(一)

    jquery 插件学习(一)

    jquery插件,有几种方法,有全局的,有对象方法的,一直觉得jquery插件迷迷糊糊,这阵子特地研究下,供那些像我一样的初学者借鉴下。嘻嘻
    2012-08-08
  • jQuery实现渐变下拉菜单的简单方法

    jQuery实现渐变下拉菜单的简单方法

    这篇文章主要介绍了jQuery实现渐变下拉菜单的简单方法,涉及jQuery链式操作及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jquery阻止冒泡事件使用模拟事件

    jquery阻止冒泡事件使用模拟事件

    当点击span的时候div和body的事件全部触发了。要阻止这种发生并使用模拟事件。具体实现如下,感兴趣的朋友可以参考下
    2013-09-09

最新评论