微信聊天框（html+css+js）实现

1.来源

这是我在哔哩哔哩的上面的一个js网课的案例，说是有未添加js的版本（也就是只有样式的html），但我找不到，就只能自己写，比较丑。

主要是小图标，都是用的之前的项目的图标，图片大小看着差不多就行了。还有就是颜色，随便整的。

2.界面

在这里插入图片描述

3.功能

功能及比较简单。就是按一下，左下角的小图标，就可以切换聊天者，就两个，user1和user2.

不同的用户，发出的文字分别是两边的，在中间的框内输入，按一下发送，就能在上面的聊天框里看见。

聊天长度大于页面大小的话，右边会出现滚动条（挺难看的，不想改了）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .fl{
            float: left;
        }
        .clearfixd:after {
            content: "";
            display: block;
            clear: both;
        }
        .box{
            height: 1000px;
            width: 1000px;
            overflow: hidden;
            margin-top: 50px;
        }
        .box .phone{
            height: 520px;
            width: 280px;
            margin:50px auto;
            background:grey;
            border-radius: 10px;
        }
        .box .phone .top{
            width: 60px;
            height: 20px;
            margin: 0 auto;
            border-bottom: 4px solid black;
            margin-bottom: 20px;
        }
        .box .phone .bottom{
            height: 435px;
            width: 250px;
            margin: 0 auto;
            background: whitesmoke;
        }
        .box .phone .bottom .chat{
            height: 390px;
            width: 230px;
            margin: 0 auto;
            overflow-y:auto; 
            overflow-x:auto;
        }
        .box .phone .bottom .chat ul{
            list-style: none;
            width: 230px;
        }
        .box .phone .bottom .chat ul li{
            padding-top: 10px;
            width: 230px;
        }

        .box .phone .bottom .chat .text1{
            width: 190px;
            font: 14px "微软雅黑";
            line-height: 20px;
            border-radius: 5px;
            padding: 10px 0;
            background: rgb(126, 124, 128);
        }
        .box .phone .bottom .chat .imag1{
            height: 30px;
            width: 40px;
            background-size: 28px 28px;
            margin-top: 5px;
        }
        .box .phone .bottom .diolog{
            margin: 6px auto;
            height: 33px;
            width: 220px;
        }
        .box .phone .bottom .diolog .left{
            height: 33px;
            width: 33px;
            background-size: 33px 33px;
        }

        .box .phone .bottom .diolog .txt{
            height: 33px;
            width: 147px;
            border-radius: 7px;
            background: white;
            margin-left: 3px;
            border: none;
        }
        .box .phone .bottom .diolog .send{
            height: 33px;
            width: 32px;
            line-height: 33px;
            font-size: 12px;
            padding-left: 5px;
            color: red;
        }


    </style>
</head>
<body>
    <div class="box">
        <div class="phone">
            <div class="top"></div>
            <div class="bottom">
                <div class="chat">
                    <ul id="list" >
                        <li class="clearfixd">
                            <div class="text1 fl">
                                第一段文字，单行
                            </div>
                            <img class="imag1 fl" src="images/icon1.png"></img>
                        </li>
                        <li class="clearfixd">
                            <img class="imag1 fl" src="images/icon2.png"></img>
                            <div class="text1 fl">
                                第二段文字，多行哈哈哈哈哈哈
                            </div>
                        </li>
                       

                    </ul>
                </div>
                <div class="diolog">
                    <img class="left fl" src="images/icon1.png"></img>
                    <input class="txt fl"></input>
                    <div class="send fl">发送</div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var left =document.querySelector('.left');
        var txt = document.querySelector('.txt');
        var send = document.querySelector('.send');
        var list = document.getElementById('list');


        var user=1

        left.onclick = function(){
            if(user==1){
                left.src ="images/icon2.png";
                user=2;
            }else {
                left.src="images/icon1.png"
                user=1;
            }
        }

        send.onclick = function(){
            if(user==1){
                list.innerHTML+='<li class="clearfixd"><div class="text1 fl">'+
                                txt.value +
                            '</div><img class="imag1 fl" src="images/icon1.png"></img></li>'
                txt.value='';
                
            }else{
                list.innerHTML+='<li class="clearfixd"></div><img class="imag1 fl" src="images/icon2.png"></img><div class="text1 fl">'+ txt.value +'</div></li>'
                txt.value='';
            }
        }
     </script>
</body>
</html>

原文链接：https://blog.csdn.net/myquicktime/article/details/115560091

微信聊天框（html+css+js）实现

你可能也喜欢