实现一个小小的聊天对话

实现一个小小的聊天对话

css样式：

img,button,input{
            margin: 0;
            padding: 0;
        }
        #div {
            width: 400px;
            height: 400px;
            border: 2px solid #000;
        }
        #img{
            margin-top: 5px;
            width: 20px;
            height: 20px;
            border: 2px solid #000;
        }
        img{
            width: 20px;
            height: 20px;
            border: 1px solid #000;
        }
        button{
            height: 20px;
            font-size: 15px;
        }
        input{
            height: 20px;
        }

html的结构：

<div id="div"></div>
    <img id="img" src="img/1.jpg" alt="">
    <input id="input" type="text" value="">
    <button id="button" type="buton">发送</button>

JS代码：

var div = document.getElementById('div');
    var img = document.getElementById('img');
    var button = document.getElementById('button');
    var input = document.getElementById('input');
    var flag = true;
    img.onclick = function(){
        if(flag){
            this.src="img/2.jpg";
        }else{
            this.src="img/1.jpg";
        }
        flag = !flag;
     }
    button.onclick = function(){
        var value = input.value
        input.value = '';
        if(flag){
            div.innerHTML +='<div style="display:block;"><img style="float: left;height: 20px;border: 1px solid #000;" src="img/1.jpg">'+'<div style="height: 20px;float: left;border: 1px solid #000;">'+value+'</div></div>'+'<div style="height:2px"></div><br>';
        }else{
            div.innerHTML +='<div style="display:block;"><img style="float: right;height: 20px;border: 1px solid #000;" src="img/2.jpg">'+'<div style="height: 20px;float: right;border: 1px solid #000;">'+value+'</div></div>'+'<div style="height:2px"></div><br>';
        }
    }

以上内容希望能帮助到，谢谢您的浏览