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自定义图片上传插件实例代码
Apr 04 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery操作动画完整实例分析
Jan 10 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
抛弃 PHP 代价太高
2016/04/26 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
python -v 报错问题的解决方法
2020/09/15 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
zooplus波兰:在线宠物店
2019/07/21 全球购物
证券期货行业个人的自我评价
2013/12/26 职场文书
计划生育证明格式范本
2014/09/12 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
2014年党务工作总结
2014/11/25 职场文书
党员先进事迹材料
2014/12/19 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
清洁工工作总结
2015/08/11 职场文书
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS