微客导航 » 文章资讯 » jQuery编写QQ简易聊天框

jQuery编写QQ简易聊天框

2023-07-17 21:49:03 133

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





QQ简易聊天框


.chatBodyulli{list-style-type:none;}
.chatBodyulliimg{width:35px;height:33px;float:left;}
.chatBodyullih1{width:395px;text-indent:0px;margin-left:6px;float:left;font-size:15px;font-weight:normal;}
.chatBodyullip{width:385px;text-indent:5px;margin:0px10px0px6px;border-radius:5px;height:30px;line-height:30px;font-size:14px;float:left;background:#CCC}



$(document).ready(function(){
//点击发送
$("#send").click(function(){
qqQend();
});
$(document).keydown(function(event){
if(event.keyCode=="13"){//按下回车键
qqQend();
}
});

functionqqQend(){
var$text=$(".chatText").val();//获取输入框内容
if($text==""){
alert("请输入聊天内容");
}else{
vartou=newArray(1,2,3);
varnames=newArray("时尚依人","松松","六月奇迹");
varr=parseInt(Math.random()*tou.length);
vartouPath="images/head0"+tou[r]+".jpg";//头像路径
$name=names[r];//人物昵称
//1、创建li
$li=$("");
//2、创建img
var$img=$("");
$li.append($img);
//3、创建h1
var$h1=(""+$name+"");
$li.append($h1);
//4、创建p
var$p=$(""+$text+"");
$li.append($p);
//5、把li添加到

中 $(".chatBodyul").append($li); $(".chatText").val('');//清空输入框 } } });

关闭(C)发送(S)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery编写QQ简易聊天框

"+$name+"

热门推荐

随机推荐