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+css实现侧边导航栏效果
Jun 12 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jquery实现抽奖功能
Oct 22 jQuery
Jquery Fade用法详解
Nov 06 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循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Python如何实现爬取B站视频
2020/05/20 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
Python 列表反转显示的四种方法
2020/11/16 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
创业计划书中要认真思考的问题
2013/12/28 职场文书
授权委托书格式模板
2014/04/03 职场文书
专科生就业求职信
2014/06/22 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python