jQuery之简易qq聊天页面_vlambda技术博客

vlambda
2020-04-03

jQuery之简易qq聊天页面

简单一个人

This browser does not support music or audio playback. Please play it in WeChat or another browser. jQuery之简易qq聊天页面

预计阅读时间6分钟

qq简易聊天界面

正文共：2391字，16图

内容概要

谢谢您的耐心观看

qq聊天界面模拟之起因

jQuery之简易qq聊天页面

作为一名大学生，neutrino总是为作业烦恼不已。

所以，这次又是个令人头大的作业

qq简易聊天界面，？？？？

jQuery之简易qq聊天页面

qq聊天界面模拟之结果

jQuery之简易qq聊天页面

吐槽归吐槽，作业还是要做的

所以，在经过一番挣扎之后

neutrino做出来啦

jQuery之简易qq聊天页面

效果演示

jQuery之简易qq聊天页面

qq聊天界面模拟之过程

jQuery之简易qq聊天页面

首先，建立一个chat.html存放基本框架

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>QQ简易聊天框</title> <link rel="stylesheet" href="css/chat.css"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js""></script> <script src="js/chat.js"></script></head><body> <section id="chat">    <div class="chatBody"><ul></ul></div><!--chat.js执行的效果全都放在这里--> <div class="img"><img src="images/icon.jpg"></div> <textarea class="chatText"></textarea> <div class="btn"> <span id="close">关闭(C)</span> <span id="send">发送(S)</span> </div></section> </body></html>

效果：

jQuery之简易qq聊天页面

然后建立一个js文件夹存放chat.js

$(document).ready(function(){  var headImg=new Array("head01.jpg","head02.jpg"); //定义图片数组  var uName=new Array("L","G"); //定义名字数组      var iNum=1;  $("#send").click(function(){ var $Li=$("<li></li>");  if(iNum==0){//INum为0时，则加1换成另外一张，实现轮流出现的效果 iNum=iNum+1; }else{ iNum=iNum-1; }  var p=$("<p></p>");$(p).append("<div style='font-size:10px;'>"+$(".chatText").val()+"</div>"+"<br>");//获取输入内容 if($(".chatText").val()==""){//判断输入内容是否为空 alert("请输入内容") }else{       var $touImg=$("<div><img src=images/"+headImg[iNum]+"></div>"); //轮流获得数组照片        $name=uName[iNum];//轮流获取数组的名字       var $qqname=$("<h1 style='color:#0000FF;'>"+$name+"</h1>");//给名字添加样式        $($Li).append($touImg);//touImg追加在Li之后          $($Li).append($qqname);//qqname追加在Li之后           $($Li).append(p);//p追加在li之后            $(".chatBody ul").append($Li);//将内容追加在ul之后         $(".chatText").val("");//获取完内容之后清空输入框 } }); $("#close").click(function(){ var x;    var r=confirm("确定关闭页面吗？");//询问是否确定关闭页面 if(r==true)//点击确定则关闭页面 close();});});

jQuery之简易qq聊天页面

建立一个css文件夹存放chat.css

color: #ffffff; border-radius: 5px; background-color: #069dd5; font-size: 12px; margin-right: 3px; cursor:pointer;}.chatBody p{float: left; width:370px; font-size: 12px; color: #0000ff;}ul,li { list-style: none;}.chatBody ul li { padding: 10px 0; /*border-bottom: 1px #999999 dashed;*/ overflow: hidden;}
.chatBody ul li div { float: left; border-bottom-style: none; margin-right: 5px;}
}.chatBody ul li div img { width: 40px;}
.chatBody ul li h1 { font-size: 10px; line-height: 20px;
}.chatBody ul li p { color:midnightblue; line-height: 25px; font-size: 8px;}.chatBody ul li p div { padding-right: 20px; background-color:#EFEFEF; width:340px;  border-radius: 5px;/**定义获取到输出内容的框的圆弧度**/}