jQuery实现QQ简易聊天框
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jQuery实现QQ简易聊天框
实现效果：
html代码：
<section id="chat">
<div class="chatBody"></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>
jQuery代码：
$(function(){
$("#send").click(function (){
//使⽤数组保存聊天者的头像和昵称
let uName = ["时尚伊⼈","六⽉奇迹","松松"];
//随机获取头像和昵称
let iNum=parseInt((Math.random()*2)+1);
//设置昵称
let userName="<span>"+uName[iNum]+"</span>";
//设置头像
let headStr="<img src=images/head0"+iNum+".jpg style='vertical-align:middle'>";
//获取输⼊框内容
let $text = $(" textarea").val();
console.log($text);
//判断输⼊框是否输⼊内容
if ($text.length!==0){
//获取聊天内容
let str = $(".chatBody").html();
//将输⼊框内容添加到聊天内容中
$(".chatBody").html(str+"<div>"+headStr+userName+"<p style='margin-left: 36px;'>"+$text+"</p>"+"</div>"); $(".chatBody div p").addClass("content");
$(" textarea").val("")
}
})
})。