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为某个div加入行样式
Jun 09 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jquery实现购物车基本功能
Oct 25 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生成xml简单实例代码
2009/12/16 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
php实现socket推送技术的示例
2017/12/20 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
javascript json2 使用方法
2010/03/16 Javascript
js转义字符介绍
2013/11/05 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python线程指南详细介绍
2017/01/05 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
Python学习之time模块的基本使用
2021/01/17 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
百联网上商城:i百联
2017/01/28 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
大学毕业通用个人的求职信
2013/12/08 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
超市总经理岗位职责
2014/02/02 职场文书
2014年团支书工作总结
2014/11/14 职场文书
鸟的天堂导游词
2015/01/31 职场文书
地球一小时活动总结
2015/02/27 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS