2021-05-07

最新推荐文章于 2024-10-08 17:48:41 发布

Traren、赫赫

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量80

点赞数

本文链接：https://blog.csdn.net/weixin_57746421/article/details/116484400

版权

前端

聊天框小案例

1.HTML的布局代码段

<body>
    <div class="dahe">
        <div class="zhonhe" id="zhonhe">
            <div class="aa">
                <span class="aa1">A说：你吃饭了吗</span>
            </div>
            <div class="bb">
            <span class="bb2">B说：还没吃，你呢？</span>
            </div>
        </div>
        <div class="xiahe">
            <div class="xiaolakuang" style="margin-left: 13px;">
                <select name="" id="xiaola" class="xiaola">
                    <option value="0">A说</option>
                    <option value="1">B说</option>
                </select>
            </div>
            <div class="input" style="margin-left: 15px">
                <input type="text" style="width: 400px; height: 30px;" id="input">
            </div>
            <div class="btn" style="margin-left: 15px">
                <button class="btnn" style="width: 60px; height: 34px" id="btnn">发送</button>
            </div>
        </div>
    </div>
</body>

2.CSS的代码段

.dahe{
    width: 600px;
    height: 530px;
    margin: 20px auto;
    background: #eee;
    padding-top: 12px;
    border: 1px solid #000;
    flex-wrap: wrap;
}
.zhonhe{
    width: 575px;
    height: 456px;
    margin:  auto;
    background-color: white;
    border: 1px solid #000;
    background: url("../img/20161019183336_64027.jpg") no-repeat;
    overflow: auto;/*鼠标滚轮*/
    flex-wrap: wrap;
}
.xiahe{
    display: flex;
    margin-top: 20px;
}
.aa{
    text-align: left;
    margin-left: 10px;
    margin-top: 10px;
}
.bb{
    text-align: right;
    margin-right: 10px;
    margin-top: 10px;
}
.aa span{
    display: inline-block;
    padding: 2px 8px;
    background:#75BAC0;
    border-radius: 20px;
    color: white;
    font-size:16px;
    
}
.bb span{
    display: inline-block;
    padding: 2px 8px;
    background:#299332;
    border-radius: 20px;
    color: white;
    font-size: 16px;

}
.xiaola{
    width: 80px;
    height: 34px;
    flex-wrap: wrap;
}

3.JavaScript的代码段

// JavaScript Document
window.onload=function(){
    var zhonhe=document.getElementById("zhonhe");
    var xiaola=document.getElementById("xiaola");
    var btnn=document.getElementById("btnn");
    var input=document.getElementById("input");
    btnn.onclick=function(){
        var shuchu1=xiaola.value;
        var shuchu2=input.value;
        var scu='';
        if(shuchu1==0){
            scu = "<div class='aa'><span>A说:  "+shuchu2+'<span></div>';
           
        }else{
            scu = "<div class='bb'><span>B说:  "+shuchu2+'<span></div>';
        }
       zhonhe.innerHTML=zhonhe.innerHTML+scu;
        input.value="";//清空输入框
    }
    
};

4.页面的效果图