微信聊天界面仿制-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43712187/article/details/111600336

文章目录

- - 一、功能
  - 二、代码

一、功能

思路分析：
1)点击图片实现用户切换功能
1-1：默认两个用户，通过点击来回切换
2）点击发送按钮，八用户得聊天内容展示聊天区域
2-1、点击发送按钮，把聊天内容展示在聊天区域
2-2、设定聊天在领土区域内不同位置显示

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>微信聊天界面</title>
   <style>
    *{
           padding: 0px;
           margin: 0px;
    }
       #container{
           width:450px;
           height:600px;
           background: #eee;
           margin: 10px auto 0;
           position: relative;
           box-shadow: 0 0 16px #999;
       }
       .header{
           height: 34px;
           background: #000;
           color: #fff;
           line-height: 34px;
           font-size: 20px;
           padding: 0 10px;
       }
       .footer{
           width: 430px;
           height: 40px;
           background: #999;
           position: absolute;
           bottom: 0px;
           padding: 10px;
       }
       .footer input{
           width: 300px;
           height: 38px;
           outline: none;
           font-size: 16px;
           text-indent: 10px;
           position: absolute;
           border-radius: 6px;
           right: 80px;
       }
       .footer span{
           display: inline-block;
           width: 62px;
           height: 38px;
           background: #ccc;
           font-weight: 900;
           line-height: 38px;
           cursor: pointer;
           text-align: center;
           position: absolute;
           right: 10px;
           top: 14px;
           border-radius: 6px;
       }
       .footer span:hover{
           color: #777;
           background: #ddd;
       }
       .icon{
           display: inline-block;
           background: red;
           width: 50px;
           height: 50px;
           border-radius: 30px;
           position: absolute;
           bottom: 3px;
           left:10px;
           cursor: pointer;
           overflow: hidden;
       }
       img{
           width: 60px;
           height: 60px;
           border-radius: 8px;
       }
       .content{
           font-size: 20px;
           width: 435px;
           height: 662px;
           overflow: auto;
           padding: 5px;
       }
   /*    内容--------------*/
    .content li {
        margin-top: 10px;
        padding-left: 10px;
        width: 412px;
        display: block;
        /*清除浮动*/
        clear: both;
        overflow: hidden;
    }
    /*内容部分主要是用li
    1、图片切换人物
    2、内容每一行用li li就是每个人得图像和聊天内容 img图像  span是聊天内容
    3、下面得图像时当前得人，点击切换
    4、下面内容输入点击发送后，到内容，图像和内容
    5、两个人物两个背景色
    */
    .content li img {
        float: left;
    }
    /*聊天内容*/
    .content li span {
        background: #7cfc00;
        padding: 10px;
        border-radius: 10px;
        float: left;
        margin: 6px 10px 0 10px;
        max-width: 310px;
        border: 1px solid #ccc;
        box-shadow: 0 0 3px #ccc;
    }

    .content li img.imgleft {
        float: left;
    }

    .content li img.imgright {
        float: right;
    }

    .content li span.spanleft {
        float: left;
        background: #fff;
    }

    .content li span.spanright {
        float: right;
        background: #7cfc00;
    }
   </style>
</head>
<body>
<!--1、大的盒子-->
   <div id="container">
<!-- ---------------------------------- 2、头部-------------------------------------------------------------->
       <div class="header"> <span style="float: right;">20:30</span> <span style="float: left;">小泽老师</span> </div>
<!----------------------------------------3、内容---------------------------------------------------------->
       <ul class="content"></ul>
<!-------------------------------------------4、底部----------------------------------------------------->
       <div class="footer">
           <div class="icon"> <img src="images/1.png" alt="" id="icon"> </div>
           <input id="text" type="text" placeholder="说点什么吧..."> <span id="btn">发送</span> </div>
   </div>
<script>
/*
                       思路分析：
                       1)点击图片实现用户切换功能
                       1-1：默认两个用户，通过点击来回切换
                       2）点击发送按钮，八用户得聊天内容展示聊天区域
                       2-1、点击发送按钮，把聊天内容展示在聊天区域
                       2-2、设定聊天在领土区域内不同位置显示
*/
//首先点击图片切换图片
   var img =document.getElementById('icon');
//    数组存储了两个用户得路径
   var arr=['images/1.png','images/2.png'];
//    标识符falg=0表示图像1    =1表示图像2
   var flag=0;
//    实现功能切换图像
   img.onclick=function () {
       if(flag==0){
           img.src=arr[1];
           flag=1;
       }
       else {
           img.src=arr[0];
           flag=0;
       }
   }
//    实现功能发送消息
   var btn=document.getElementById('btn');
   var num=-1;//聊天统计条数
   btn.onclick=function () {
   //    判断聊天内容是否为空
       var text=document.getElementById('text').value;
       if(text===''){
           alert('聊天记录不能为空');
       }else {
       //    把用户内容添加到内容区域
           var content=document.getElementsByTagName('ul')[0];
           //需要好好理解
           content.innerHTML+="<li><img src='"+arr[flag]+"'/><span>"+text+"</span></li>";
       }
       var imgs=content.getElementsByTagName('img');
       var span=content.getElementsByTagName('span');
       num++;
       if(flag==0){
           imgs[num].className='imgleft';
           span[num].className='spanleft';
       }else {
           imgs[num].className='imgright';
           span[num].className='spanright';
       }
       //清空聊天记录
       document.getElementById('text').value="";
   }
</script>
</body>
</html>