仿QQ简易聊天

最新推荐文章于 2025-06-04 16:01:57 发布

Guo小阳*

最新推荐文章于 2025-06-04 16:01:57 发布

阅读量474

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41602101/article/details/89519267

本文介绍如何使用HTML、CSS和jQuery来创建一个仿QQ的简易聊天应用程序。通过结合基本的网页结构与jQuery的交互功能，实现一个简单的聊天界面和交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html+css 如下：

<!DOCTYPE html> 
<html> 
<head lang="en"> <meta charset="UTF-8"> 
<title>QQ简易聊天框</title> 
   <style type="text/css">
   *{
    margin: 0;
    padding: 0;
    list-style: none;
   }
   .box{
    width: 600px;
    height: 500px;
    margin: 25px auto;

   }
   #ltk{
    width: 500px;
    height: 350px;
    background:#ccc;
    overflow-y: auto;
   }
   #wbk{
    height: 105px;
    width: 500px;
    position: relative;
   }
   #btn{
    position: absolute;
    right: 10px;
    bottom: 10px;
    border:0;
    width: 85px;
    height: 33px;
    outline: none;
    cursor:pointer;
   }
   #wbk #btn:hover{
    background:#666;
    color:#FFF;
   }
   #con{
    width: 490px;
    height: 95px;
    border:0;
    background:#ccc;
    outline:none;
   }
 #ltk{
    overflow-y:scroll;
   }

    </style>
</head>
<body>
    <div class="box">
    <div id="ltk">
        <ul class="u" id="ji">
            
        </ul>
    </div>
    <div><img  src="img/QQ图片20190418173005.png" height="40" width="500" alt="" /></div>
    <div id="wbk">
    <textarea name="" id="con" cols="30" rows="10" ></textarea>
    <button id="btn">发送(S)</button></div>
    </div>
</body>

源生：

<script type="text/javascript">
var tou =["img/1.jpg","img/2.jpg","img/3.jpg"]   //图片数组
var names=new Array("时尚伊人","六月奇迹","松松");//人物数组
var item=document.getElementById("ji");
var kg=document.getElementById("ltk")
//两个获取

    btn.onclick=function(){
      qqend();  //按钮的单击事件执行函数
    }
  document.onkeydown=function(event){
    var e=event||window.event;
    if(e.keyCode==13){   //键盘事件 按到回车执行函数
      qqend();
    }
  }
  function qqend(){

    var r =Math.round(Math.random()*2);   //随机数
   var val =con.value;     //获取值
     if (val==""){
      alert("请输入聊天内容");  //非空验证
    }else{
         var img =document.createElement("img");
        img.src=tou[r]
        img.style.width="40px";     
        img.style.height="40px";
        img.style.display="inlne-block"
        //新建图片节点 并设置图片路径及样式
        item.appendChild(img)
     //图片插入列表
        var name=names[r];  //随机获取姓名
        var h=document.createElement("h4");
           h.innerHTML="<h4>"+name+"</h4>"
           h.style.display="inline-block"
           新建h4标签  h4的内容显示姓名 以及设置样式
           item.appendChild(h)
      //姓名插入列表
        var li=document.createElement("li");
         li.innerHTML= val;  
         //新建li节点  li的值为输入的值
        item.appendChild(li);
          //value值插入列表
        con.value= ""; 
      //清空输入框 
     kg.scrollTop=kg.scrollHeight;
 //滚动条的top值为滚定条高度 使刚输入的内容一直显示
}
  }

jQuery封装

<script type="text/javascript">
      $(document).ready(function() {
               $(btn).click(function(){
                qqend();
        });     
        $(document).keydown(function(event){
            if(event.keyCode=="13"){//按下回车键
                qqend();
            }
        });
     function qqend(){
            var $text=$("#ltjl").val();//获取输入框内容
            if($text==""){
                alert("请输入聊天内容");
            }else{ 
            var tou =["img/1.jpg","img/2.jpg","img/3.jpg"]
            var names=["时尚伊人","松松","六月奇迹"]  
            var r =Math.round(Math.random()*2);
          $name=names[r];//人物昵称  
            //创建li
            $li=$("<li></li>");
            //创建img
        var $img=$('<img src="" alt="">');
        $img.css({"width":"40px","height":"40px","display":"inline-block"});
        $img.attr("src",tou[r]);
        $li.append($img);
            //创建h4
            var $h4=("<h4>"+$name+"</h4>")
            $li.append($h4);
            //创建p
            var $p=$("<p>"+$text+"</p>");
            $li.append($p);
            //把li添加到 <div id="ltk"><ul></ul></div>中
            $(".u").append($li);
              $("#ltjl").val('');//清空输入框 
         $(".nb")[0].scrollTop = $(".nb")[0].scrollHeight
            }
        }
    });

</script>