js实现简易微信聊天

最新推荐文章于 2023-07-30 13:31:51 发布

门觉jiáo

最新推荐文章于 2023-07-30 13:31:51 发布

阅读量1k

点赞数 3

文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/KKnight1/article/details/126961437

版权

html

  <div class="background">
    <div class="box">
        <div class="header">鸡哥</div>
        <div class="chat1" id="chat1"> 
        </div>
        <input type="text" class="txt" id="txt1">
        <span class="btn" id="btn1">发送</span>
    </div>
    <div class="box">
        <div class="header">ikun</div>
        <div class="chat2" id="chat2">
        </div>
        <input type="text" class="txt" id="txt2">
        <span class="btn" id="btn2">发送</span>
    </div>
</div>

css

*{margin: 0px;padding: 0px;}
.background{
    width: 1500px;
    height: 800px;
    background: #999;
}
.box{
    width: 300px;
    height: 700px;
    border: 0px solid black;
    position: relative;
    left: 100px;
    float: left;
    margin: 20px 50px 0 0;
}
.header{
    width: 99.6%;
    height: 50px;
    background: #fff;
    border: 1px solid black;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
}
.chat1{
    width: 100%;
    height: 612px;
    background: url(../img/vx1.webp);
    float: left;
    overflow: scroll;
}
.chat2{
    width: 100%;
    height: 612px;
    background: url(../img/vx2.webp);
    background-size: 100% 100%;
    float: left;
    overflow: scroll;
}
.content-txt{
    border: 0px solid red;
    padding: 8px;
    float: right;
    width: 95%;
    margin: 0 0 8px 0;
}
.content-txt2{
    border: 0px solid red;
    padding: 8px;
    float: left;
    width: 95%;
    margin: 0 0 8px 0;
}
.header2{
    float: right;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin: 0px 0px 0 10px;
}
.header3{
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin: 0px 10px 0 0px;
}
.pao{
    float: right;
    border-radius: 5px;
    background: greenyellow;
    padding: 5px 10px;
    max-width: 200px;
}
.pao2{
    float: left;
    border-radius: 5px;
    background: greenyellow;
    padding: 5px 10px;
}
/* .txt6{
    width: 85%;
} */
.txt7{
    width: 85%;
    float: right;
}
.txt{
    display: inline-block;
    width: 75%;
    height: 35px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    border: 0px;
    border-top: 1px solid black;
    background: #fff;
}
.btn{
    display: block;
    border: 1px solid black;
    width: 25%;
    height: 35px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    bottom: -1px;
    right: 0px;
    background: #ddd;
    cursor: pointer;
}

var oTxt1 = document.getElementById("txt1"),
    oBtn1 = document.getElementById("btn1"),
    oChat1 = document.getElementById("chat1"),
    oChat2 = document.getElementById("chat2"),
    oTxt2 = document.getElementById("txt2"),
    oWords1 = document.getElementById("words1"),
    oWords2 = document.getElementById("words2"),
    oBtn2 = document.getElementById("btn2");
oBtn1.onclick = function (){
    oChat1.innerHTML += "<div class='content-txt'><img src='img/h1.webp' class='header2'/><p class='txt6'><span class='pao'>"+oTxt1.value+"</span></p></div>";
    oChat2.innerHTML += "<div class='content-txt2'><img src='img/h1.webp' class='header3'/><p class='txt7'><span class='pao2'>"+oTxt1.value+"</span></p></div>";
    oTxt1.value = "";
}
oBtn2.onclick = function (){
    oChat2.innerHTML += "<div class='content-txt'><img src='img/h2.webp' class='header2'/><p class='txt6'><span class='pao'>"+oTxt2.value+"</span></p></div>";
    oChat1.innerHTML += "<div class='content-txt2'><img src='img/h2.webp' class='header3'/><p class='txt7'><span class='pao2'>"+oTxt2.value+"</span></p></div>";
    oTxt2.value = "";
}

效果图