您现在的位置是:网站首页>博客详情博客详情

前端实现简单的聊天页面

凡繁烦2020-10-30 14:14前端技术2112人已围观

简介原生html+css+js实现简单的聊天界面的布局

代码不多,直接贴上来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天气泡</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .container{
        height: 760px;
        width: 900px;
        border-radius: 4px;
        border: 0.5px solid #e0e0e0;
        background-color: #f5f5f5;
        display: flex;
        flex-flow: column;
        overflow: hidden;
    }
    .content{
        width: calc(100% - 40px);
        padding: 20px;
        overflow-y: scroll;
        flex: 1;
    }
    .content:hover::-webkit-scrollbar-thumb{
        background:rgba(0,0,0,0.1);
    }
    .bubble{
        max-width: 400px;
        padding: 10px;
        border-radius: 5px;
        position: relative;
        color: #000;
        word-wrap:break-word;
        word-break:normal; 
    }
    .item-left .bubble{
        margin-left: 15px;
        background-color: #fff;
    }
    .item-left .bubble:before{
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-top: 10px solid transparent;
        border-right: 10px solid #fff;
        border-bottom: 10px solid transparent;
        left: -20px;
    }
    .item-right .bubble{
        margin-right: 15px;
        background-color: #9eea6a;
    }
    .item-right .bubble:before{
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-left: 10px solid #9eea6a;
        border-top: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        right: -20px;
    }
    .item{
        margin-top: 15px;
        display: flex;
        width: 100%;
    }
    .item.item-right{
        justify-content: flex-end;
    }
    .item.item-center{
        justify-content: center;
    }
    .item.item-center span{
        font-size: 12px;
        padding: 2px 4px;
        color: #fff;
        background-color: #dadada;
        border-radius: 3px;
        -moz-user-select:none; /*火狐*/
        -webkit-user-select:none; /*webkit浏览器*/
        -ms-user-select:none; /*IE10*/
        -khtml-user-select:none; /*早期浏览器*/
        user-select:none;
    }

    .avatar img{
        width: 42px;
        height: 42px;
        border-radius: 50%;
    }
    .input-area{
        border-top:0.5px solid #e0e0e0;
        height: 150px;
        display: flex;
        flex-flow: column;
        background-color: #fff;
    }
    textarea{
        flex: 1;
        padding: 5px;
        font-size: 14px;
        border: none;
        cursor: pointer;
        overflow-y: auto;
        overflow-x: hidden;
        outline:none;
        resize:none;
    }
    .button-area{
        display: flex;
        height: 40px;
        margin-right: 10px;
        line-height: 40px;
        padding: 5px;
        justify-content: flex-end;
    }
    .button-area button{
        width: 80px;
        border: none;
        outline: none;
        border-radius: 4px;
        float: right;
        cursor: pointer;
    }

    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width:10px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
        border-radius:8px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius:10px;
        background:rgba(0,0,0,0);
        -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
    }
</style>
<body>
    <div class="container">
        <div class="content">
            <div class="item item-center"><span>昨天 12:35</span></div>
            <div class="item item-center"><span>你已添加了凡繁烦,现在可以开始聊天了。</span></div>
            <div class="item item-left"><div class="avatar"><img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" /></div><div class="bubble bubble-left">您好,我在武汉,你可以直接送过来吗,我有时间的话,可以自己过去拿<br/>!!!<br/>123</div></div>
            
            <div class="item item-right"><div class="bubble bubble-right">hello<br/>你好呀</div><div class="avatar"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" /></div></div>
            <div class="item item-center"><span>昨天 13:15</span></div>
            <div class="item item-right"><div class="bubble bubble-right">刚刚不在,不好意思</div><div class="avatar"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" /></div></div>
            <div class="item item-left"><div class="avatar"><img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" /></div><div class="bubble bubble-left">没事<br/>你继续!</div></div>
            <div class="item item-left"><div class="avatar"><img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" /></div><div class="bubble bubble-left">看到了<br/>在下面</div></div>
            <div class="item item-left"><div class="avatar"><img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" /></div><div class="bubble bubble-left">你发一个<br/>刚刚网卡了</div></div>
            <div class="item item-right"><div class="bubble bubble-right">可以<br/>一会儿再发给你</div><div class="avatar"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" /></div></div>
        </div>
        <div class="input-area">
            <textarea name="text" id="textarea"></textarea>
            <div class="button-area">
                <button id="send-btn" onclick="send()">发 送</button>
            </div>
        </div>
    </div>
</body>
<script>

    function send(){
        let text = document.querySelector('#textarea').value;
        if(!text){
            alert('请输入内容');
            return ;
        }
        let item = document.createElement('div');
        item.className = 'item item-right';
        item.innerHTML = `<div class="bubble bubble-left">${text}</div><div class="avatar"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" /></div>`;
        document.querySelector('.content').appendChild(item);
        document.querySelector('#textarea').value = '';
        document.querySelector('#textarea').focus();
        //滚动条置底
        let height = document.querySelector('.content').scrollHeight;
        document.querySelector(".content").scrollTop = height;
    }
</script>
</html>

效果如图

很赞哦! (0)

文章评论(共3条)

{{item.createTime}} {{item.commentArea}} |({{item.commentIp}})
{{it.createTime}}{{it.commentArea}} | ({{it.commentIp}})
上一页 1 ... {{num}} ... 下一页 {{totalPage}} 跳转到: GO

站点信息

  • 建站时间:2020-03-28
  • 开发语言:JAVA
  • 文章统计:13篇
  • 文章评论:4条
  • 统计数据百度统计
  • 微博:扫描二维码,关注

打赏本站

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝:非常感谢您的慷慨支持~