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输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jquery轮播图插件使用方法详解
Jul 31 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安装全攻略:APACHE
2006/10/09 PHP
初品cakephp 入门基础
2012/02/16 PHP
四个PHP非常实用的功能
2015/09/29 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python实现学生成绩测评系统
2020/06/22 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
学校采购员岗位职责
2014/01/02 职场文书
培训专员岗位职责
2014/02/26 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
结婚司仪主持词
2015/06/29 职场文书
MySQL数据库事务的四大特性
2022/04/20 MySQL