jQuery编写QQ简易聊天框


Posted in jQuery onAugust 27, 2020

本文实例为大家分享了jQuery编写QQ简易聊天框的具体代码,供大家参考,具体内容如下

jQuery编写QQ简易聊天框

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>QQ简易聊天框</title>
 <link rel="stylesheet" href="css/chat.css" >
 <style type="text/css">
 .chatBody ul li{ list-style-type:none;}
 .chatBody ul li img{ width:35px; height:33px; float:left;}
 .chatBody ul li h1{width:395px; text-indent:0px; margin-left:6px;float:left; font-size:15px; font-weight:normal;}
 .chatBody ul li p{width:385px; text-indent:5px; margin:0px 10px 0px 6px; border-radius:5px; height:30px; line-height:30px;font-size:14px; float:left; background:#CCC}
 </style>
 <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
     //点击发送
    $("#send").click(function(){
  qqQend();
 }); 
 $(document).keydown(function(event){
 if(event.keyCode=="13"){//按下回车键
 qqQend();
 }
 });
 
 function qqQend(){
 var $text=$(".chatText").val();//获取输入框内容
 if($text==""){
 alert("请输入聊天内容");
 }else{ 
 var tou=new Array(1,2,3);
 var names=new Array("时尚依人","松松","六月奇迹");
 var r=parseInt(Math.random()*tou.length);
 var touPath="images/head0"+tou[r]+".jpg";//头像路径
 $name=names[r];//人物昵称  
 //1、创建li
 $li=$("<li></li>");
 //2、创建img
 var $img=$("<img src="+touPath+" />");
 $li.append($img);
 //3、创建h1
 var $h1=("<h1>"+$name+"</h1>");
 $li.append($h1);
 //4、创建p
 var $p=$("<p>"+$text+"</p>");
 $li.append($p);
 //5、把li添加到 <div class="chatBody"><ul></ul></div>中
 $(".chatBody ul").append($li);
      $(".chatText").val('');//清空输入框 
 }
 }
 });
 </script>
</head>
<body>
<section id="chat">
 <div class="chatBody"><ul></ul></div>
 <div><img src="images/icon.jpg"></div>
 <textarea class="chatText"></textarea>
 <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jQuery实现简单QQ聊天框
Aug 27 #jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 #jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 #jQuery
jQuery实现评论模块
Aug 19 #jQuery
jQuery实现简单评论功能
Aug 19 #jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 #jQuery
jQuery实现异步上传一个或多个文件
Aug 17 #jQuery
You might like
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
js轮播图代码分享
2016/07/14 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
Vue动态组件实例解析
2017/08/20 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python 实现微信防撤回功能
2019/04/29 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
校园之声广播稿
2014/01/31 职场文书
就职演讲稿范文
2014/05/19 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
撤诉申请怎么写
2015/05/19 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS