微信简单聊天

最新推荐文章于 2025-05-09 15:29:25 发布

大地的那个土

最新推荐文章于 2025-05-09 15:29:25 发布

阅读量584

点赞数

文章标签：微信 html css

本文链接：https://blog.youkuaiyun.com/m0_59199315/article/details/122112433

版权

其中的图片自己随便找一张就行

<!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>
    <link rel="stylesheet" href="css/wxlt.css">
</head>
<body>
    <div id="all">
    <!--阿毛微信-->
    <div class="boy">
        <div class="head">仔</div>
        <!--下面的div用来添加发布的消息内容-->
        <div class="txt" id="boy_txt"></div>
        <div class="ask">
            <input type="text" id="b_ask">
            <a href="##" id="b_btn">发送</a>
        </div>
    </div>
        
    <!--阿美微信-->
    <div class="girl">
        <div class="head">女</div>
        <!--下面的div用来添加发布的消息内容-->
        <div class="txt" id="girl_txt"></div>
            <div class="ask">
                <input type="text" id="g_ask">
                <a href="##" id="g_btn">发送</a>
            </div>
        </div>
    </div>


    <!--导入JS文件-->
    <script src="js/wxlt.js">
    </script>
    </div>
</body>
</html>

//获取标签元素
var oBoyTxt = document.getElementById("boy_txt");//小哥哥的内容展示区
var oBask = document.getElementById("b_ask");//小哥哥的输入文本框
var oBbtn = document.getElementById("b_btn");//小哥哥的发送按钮
var oGirlTxt = document.getElementById("girl_txt");//小姐姐的内容展示区
var oGask = document.getElementById("g_ask");//小姐姐的输入文本框
var oGbtn = document.getElementById("g_btn");//小姐姐的发送按钮

//当点击小哥哥的发送按钮是，将信息添加到信息展示区
oBbtn.onclick = function (){
    //获取小哥哥输入文本框的内容,添加到小哥哥的内容区域，并且显示在右边，带自己头像
    oBoyTxt.innerHTML += "<div class='box'><p class='ask_text1'>"+"<span class='ask_span1'>" +oBask.value+ "</span>"+"</p>"+"<img src='img/02.webp'class='header1'>"+"</div>";
    //将小哥哥发送出去的内容显示到小姐姐的内容区域的左边
    oGirlTxt.innerHTML += "<div class='box'><p class='ask_text2'>"+"<span class='ask_span2'>" +oBask.value+ "</span>"+"</p>"+"<img src='img/02.webp'class='header2'>"+"</div>";
    oBask.value = " ";
}

//当点击小姐姐的发送按钮是，将信息添加到信息展示区
oGbtn.onclick = function (){
    //获取小姐姐输入文本框的内容,添加到小姐姐的内容区域，并且显示在右边，带自己头像
    oGirlTxt.innerHTML += "<div class='box'><p class='ask_text1'>"+"<span class='ask_span1'>" +oGask.value+ "</span>"+"</p>"+"<img src='img/01.jpg'class='header1'>"+"</div>";
    //将小姐姐发送出去的内容显示到哥哥的内容区域的左边
    oBoyTxt.innerHTML += "<div class='box'><p class='ask_text2'>"+"<span class='ask_span2'>" +oGask.value+ "</span>"+"</p>"+"<img src='img/01.jpg'class='header2'>"+"</div>";
    oGask.value = " ";
}

*{margin: 0;padding: 0;}
#all{width: 100%;height: 900px;background: #666;}
.boy,.girl{width: 450px;height: 850px;background: teal;float: left;margin: 20px 50px 0 20px;}
.head{width: 100%;height: 40px;background: #fff;text-align: center;line-height: 40px;font-size: 20px;}
.txt{width: 95.5%;height: 730px;border: 0px solid red;padding: 10px;overflow: auto;}
#boy_txt{background: url(../img/03.webp);background-size: 100% 100%;}
#girl_txt{background: url(../img/03.webp);background-size: 100% 100%;}
.ask{width: 100%;background: #fff;height: 60px;}
.ask input{width: 360px;height: 58px;border: 1px solid #ccc;outline: none;padding-left: 10px;float: left;}
.ask a{display: inline-block;width: 78px;height: 60px;background: #ccc;float: left;text-align: center;line-height: 60px;
text-decoration: none;color: #fff;}
.ask_text1{border:0px solid red;margin-bottom: 15px;padding: 10px 0;text-align: right;width: 89%;}
.header1{width: 33px;height: 33px;float: right;margin-left: 8px;position: relative;top: -58px;right: 0px;}
.ask_span1{padding: 7px 8px;background: greenyellow;border-radius: 8px;display: inline-block;position: relative;right: 0px;}

.ask_text2{border:0px solid red;margin-bottom: 10px;padding: 10px 0;text-align: right;width: 89%;float: right;}
.header2{width: 33px;height: 33px;float: left;margin-right: 8px;position: relative;top: 10px;}
.ask_span2{padding: 7px 8px;background: greenyellow;border-radius: 8px;display: inline-block;float: left;}
.box{border: 0px solid green;float: left;width: 100%;}
/*隐藏滚动条*/
::-webkit-scrollbar{display: none;}