使用JavaScript做出简易聊天框效果

html+css代码：

<style>
        #one {
            width: 390px;
            height: 530px;
            border: 5px solid rgb(236, 8, 187);
            margin: 20px 0;
            overflow: auto;
    
        }

        img {
            width: 60px;
            border-radius: 50%;
            transform: translateY(17px);
        }

        input {
            width: 300px;
            height: 30px;
        }

        button {
            width: 90px;
            height: 30px;
        }
        .box1{
            background: url(./img/d772-isehnni2275773.jpg) no-repeat;
            background-size: 400px;
        }
    </style>

js代码：

<div class="box1">
        <div id="one"></div>
        <input type="text" id="two" placeholder="年轻人耗子尾汁！">
        <button id="three">发送</button>
    </div>
    <script>
        //获取表单值
        var _one = document.getElementById('one');
        var _two = document.getElementById('two');
        var _three = document.getElementById('three');
        var touxiang = ['./img/01.jpg', './img/04.jpg', './img/03.jpg', './img/04.jpg', './img/03.jpg', './img/01.jpg',];
        var name = ['马保国', '蔡徐坤', '马保国', '蔡徐坤', '马保国', '蔡徐坤 -0'];
        var i = 0;
        _three.onclick = function () {
            var index = Math.floor(Math.random() * 6);
            var aa = touxiang[index];
            var bb = name[index];
            var cc = _two.value;
            if (i % 2 == 0) {
                _one.innerHTML = `<div style=text-align:left;>${_one.innerHTML}<span><img src="${aa}"></span><span>${bb}</span>:${cc}<br></div>`
            } else {
                _one.innerHTML = `<div style=text-align:right;>${_one.innerHTML}${cc}:<span>${bb}</span><img src="${aa}"><br></div>`
            }
            _two.value = "";
            i++;
        }

    </script>

效果图如下：

各位朋友们快去试一下马老师效果吧！