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

来源：年旅网
模拟聊天记录框页面
<!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>
效果预览自行查看
因篇幅问题不能全部显示，请点此查看更多更全内容
查看全文