前端页面模拟聊天记录内容

最新推荐文章于 2023-12-19 19:01:59 发布

leaf ...

最新推荐文章于 2023-12-19 19:01:59 发布

阅读量1.8k

点赞数

分类专栏： js 文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_42874794/article/details/109333280

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

模拟聊天记录框页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>JavaWeb考试-题目1</title>
    <style type="text/css">
    body {
        font-size: 14px;
        background-color: #fff;
    }
    /* 请在这里完成CSS相关代码的编写 */
    
    #chatMsgs {
        padding-left: 20px;
        padding-top: 20px;
    }
    
    ul,
    li {
        list-style: none;
        padding: 0px;
        margin: 0px;
        vertical-align: top;
    }
    
    .chat-list {
        padding-bottom: 20px;
    }
    
    .chat-list img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-block;
    }
    
    .chat-list .right {
        display: inline-block;
        padding-left: 15px;
    }
    
    .chat-list .right>li {
        margin-bottom: 1px;
    }
    
    .chat-list .right>li>span {
        padding: 5px 12px;
        background: #0099ff;
        color: #ffffff;
        border-radius: 20px;
        display: inline-block;
        position: relative;
        line-height: 22px;
    }
    
    .chat-list .right>li:last-child {
        margin-bottom: 0px;
    }
    
    .chat-list:nth-child(2) .right>li:nth-child(1)>span,
    .chat-list:nth-child(3) .right>li:nth-child(1)>span {
        border-radius: 20px 20px 20px 0;
    }
    
    .chat-list:nth-child(2) .right>li:nth-child(2)>span,
    .chat-list:nth-child(3) .right>li:nth-child(3)>span {
        border-radius: 0px 20px 20px 20px;
    }
    
    .chat-list:nth-child(3) .right>li:nth-child(2)>span {
        border-radius: 0px 20px 20px 0px;
    }
    
    .chat-list .right>li i {
        background: url("./icons.png");
        width: 16px;
        height: 16px;
        display: inline-block;
        vertical-align: -3px;
        margin-left: 4px;
    }
    
    .chat-list .right>li i.smile {
        background-position: 0px;
    }
    
    .chat-list .right>li i.love {
        background-position: 16px;
    }
    
    .chat-list .right>li i.sad {
        background-position: 32px;
    }
    </style>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
    var chatMessages = [{
        "face": "face1.png",
        "msg": [{
            "content": "李佳琦今晚直播",
            "emoji": "smile"
        }]
    }, {
        "face": "face2.png",
        "msg": [{
            "content": "去看吗"
        }, {
            "content": "可以啊？",
            "emoji": "love"
        }]
    }, {
        "face": "face3.png",
        "msg": [{
            "content": "来了"
        }, {
            "content": "我可能去不了",
            "emoji": "sad"
        }, {
            "content": "我有事",
            "emoji": "sad"
        }]
    }];

    function renderChatMessages() {
        let chatHtml = '';
        chatMessages.forEach(function(value, index) {
            let Html = ``;
            value.msg.forEach(function(v, i) {
                let iconHtml = ``;
                if (v.emoji) {
                    iconHtml = "<i class=" + v.emoji + "></i>";
                }
                Html += "<li><span>" + v.content + iconHtml + "</span></li>";
            });
            chatHtml += '<div class="chat-list"><img src="./' + value.face + '" alt="" /><ul class="right">' + Html + '</ul></div>';
        });
        $("#chatMsgs").html(chatHtml);
    }
    </script>
</head>

<body>
    <div style="width:600px; margin:30px auto;">
        <div id="chatMsgs" style="min-height:400px; border: 1px dashed #ccc;">
        </div>
    </div>
    <script type="text/javascript">
    renderChatMessages();
    </script>
</body>

</html>

效果预览自行查看

leaf ...

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
前端页面模拟聊天记录内容

模拟聊天记录框页面<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>JavaWeb考试-题目1</title> <style type="text/css"> body {
复制链接

扫一扫

专栏目录