机器人聊天静态界面

最新推荐文章于 2022-11-03 10:12:01 发布

协手共建美好家园

最新推荐文章于 2022-11-03 10:12:01 发布

阅读量335

点赞数 2

分类专栏：前端笔记文章标签： css3 javascript 前端

本文链接：https://blog.csdn.net/XIYECODE/article/details/103716876

版权

前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: blanchedalmond;
        }

        .message {
            position: fixed;
            width: 600px;
            height: 50px;
            /*定位脱标，利用偏移居中*/
            left: 50%;
            bottom: 20px;
            margin-left: -300px;
            line-height: 50px;
            /**/
            text-align: center;
        }
        .message > input {
            outline: none;
            border: 0;
            border-radius: 10px;
        }
        .message > input:first-child {
            width: 60%;
            height: 50px;
            padding: 0 10px;
        }
        .message > input:last-child {
            width: 15%;
            height: 30px;
            color: snow;
            cursor: pointer;
            background-color: royalblue;
        }


        .content {
            width: 70%;
            margin: 0 auto 100px;
            padding: 20px 80px;
            /**/
            overflow: hidden;
        }
        .content li {
            position: relative;

            list-style: none;
            min-height: 30px;
            line-height: 30px;
            border-radius: 5px;
            margin: 15px auto;
            padding: 0 10px;

            max-width: 100%;
            word-break: break-word;
        }
        .content li[role='self'] {
            float: right;
            clear: both;
            background-color: chartreuse;
        }
        .content li[role='other'] {
            float: left;
            clear: both;
            background-color: white;
        }

        .content li::before {
            content: '';
            width: 50px;
            height: 50px;
            display: block;
            position: absolute;
            top: -10px;
            border-radius: 50%;
        }
        .content li[role='self']::before {
            content: '';
            right: -60px;
            background: url("img/xq.jpg");
            background-size: 100% 100%;
        }
        .content li[role='other']::before {
            content: '';
            left: -60px;
            background: url("img/q.jpg");
            background-size: 100% 100%;
        }

        .title {
            /*height: 50px;*/
            margin: 0 auto;
            background-color: white;
        }

        #chat::before {
            content: '';
            width: 100%;
            /*height: 975px;*/
            background: url("img/chatting_bg1.jpg") no-repeat fixed;
            /*伪元素设置透明度，定位是重点*/
            position: absolute;
            opacity: 0.5;
            z-index: -1;
            /*left: 50%;
            margin-left: -40%;*/
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <div class="title"></div>
    <div id="chat">
        <div class="content">
            <ul id="chat-list">
                <li role="self">Hello, i'm you friend, jack</li>
                <li role="other">jack? I don't know you...</li>
                <li role="self">What? Do you believe that i would...</li>
                <li role="other">I don't think so</li>
            </ul>
        </div>
        <div class="message">
            <input type="text" placeholder="please input what you want say..." id="send_msg" onkeyup="key_send(event)">
            <input type="button" value="Send" onclick="send()">
        </div>
    </div>
</body>
<script>
    var msg = document.getElementById("send_msg");
    var chat = document.querySelector("#chat");
    var chatList = document.getElementById("chat-list");
    /*获取选择器的样式：https://www.cnblogs.com/yucheng6/p/9696274.html*/
    var content = document.querySelector(".content");
    var contentMarginBottom = window.getComputedStyle(content, null).marginBottom.split("px");

    /*判断设备*/
    function checkUA() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/android/i) == "android" || ua.match(/iphone/i) == "iphone" || ua.match(/ipad/i) == "ipad") {
            return true;
        }
        return false;
    }

    function key_send(e) {
        if (e.keyCode == 13) {
            send();
        }
    }
    function send() {
        var val = msg.value.trim();
        if (val == "" || val.length == 0) {
            alert("没有内容无法发送");
            return;
        }
        var info = document.createElement("li");
        info.setAttribute("role", "self");
        info.innerHTML = val;
        chatList.appendChild(info);

        msg.value = "";
        receive(val);
        /*发信息时滚动到底部*/
        window.scrollTo(0, changeSize());
    }

    function receive(val) {
        var info = document.createElement("li");
        info.setAttribute("role", "other");
        info.innerHTML = "What is " + val + "????";
        chatList.appendChild(info);
    }

    function changeSize() {
        /*获取元素及其伪元素*/
        var bg = window.getComputedStyle(chat, "::before");

        /*获取伪元素属性值*/
        // var height = bg.getPropertyValue("height").split("px")[0];
        // var width = bg.getPropertyValue("width").split("px")[0];
        /*获取窗口滚动高度*/
        var scrollHeight = parseInt(content.scrollHeight.toString()) + parseInt(contentMarginBottom.toString());
        var scrollWidth = content.scrollWidth;
        /*浏览器可见高度*/
        var height = window.innerHeight;
        /*防止缩小后再扩大时滚动高度不一致*/
        if (height < scrollHeight) {
            height = scrollHeight;
        }
        /*设置伪元素高度*/
        document.styleSheets[0].addRule("#chat::before", "height:" + height + "px");
        /*判断设备是浏览器还是手机端*/
        if (!checkUA()) {   /*浏览器*/
            var width = window.innerWidth;
            if (width < scrollWidth) {
                width = scrollWidth;
            }
            document.styleSheets[0].addRule("#chat::before", "width:" + width + "px");
        } else {
            document.styleSheets[0].addRule("#chat::before", "width: 100%");
        }
        /*返回聊天窗口总高度*/
        return height;
    }

    window.addEventListener('resize', function (ev) {
        changeSize()
    });
    window.addEventListener('load', function (ev) {
        /*设置伪元素的样式*/
        changeSize();
        // document.styleSheets[0].addRule("#chat::before", "height:" + window.innerHeight + "px");
        // document.styleSheets[0].addRule("#chat::before", "width:" + content.scrollWidth + "px");
    });
    </script>
</html>

资源图片

效果页面

浏览器视图
手机端

协手共建美好家园

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
机器人聊天静态界面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>聊天室2</title> <style> * { margin: 0; padding:...
复制链接

扫一扫