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点赞功能实现代码 点个赞吧!
May 29 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 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的5个入手程序
2006/11/23 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
python字典多条件排序方法实例
2014/06/30 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
python搜索算法原理及实例讲解
2020/11/18 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
2014年教师节演讲稿
2014/09/03 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
讲座通知范文
2015/04/23 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
nginx lua 操作 mysql
2022/05/15 Servers