微信聊天框

最新推荐文章于 2022-02-09 15:24:57 发布

前进的胖子

最新推荐文章于 2022-02-09 15:24:57 发布

阅读量472

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44593999/article/details/109285792

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信聊天</title>
    <style>
        .box{
            margin: 0 auto;
            width: 800px;
            height: 800px;
            border: 1px solid black;
        }
        .box_1{
             position: absolute;
             width: 800px;
             height: 100px;
             border-top: 1px solid black;
             margin-top: 699px;
             background: rgb(187, 185, 185);
        }
        #img{
            width: 100px;
            height: 100px;
            margin-left: 10px;
            float: left;
        }
        #input{
            margin-left: 50px;
            margin-top: 25px;
            width: 400px;
            height: 50px;
            font-size: 35px;
            float: left;
          
        }
        #button{
            width: 50px;
            height: 56px;
            margin-top: 25px;
            float: left;
            margin-left: 20px;
        }
        .text{
            height: 759px;
            width: 757px;
            overflow: auto;
        }
        .text li{
            list-style: none;
            clear: both;
          
        }
        .text img{
            width: 100px;
            height: 100px;
            display: block;
        }
        .text p{
            width: 400px;
            height: 50px;
            border: 1px solid black;
        }
        .left,.righ{
            width: 800px;
            height: 100px;
        }
        .left img{
            float: left;
        }
        .left p{
            float: left;
            margin-left: 12px;
        }
        .right img{
            float: right;
        }
        .right p{  
            float: right;
            margin-right: 12px;  
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box_1">
             <img id='img' src="./人头.png" alt="">
             <input id='input' type="text">
             <button id='button'>发送</button>
        </div>
        <ul class="text">
            <!-- <li class="left">
                <img src="./人头 (1).png" alt="">
                 <p> 你好</p>
            </li>
            <li class='right'>
                <img src="./人头.png" alt="">
                <p>你好</p>
            </li> -->
        </ul>
    </div>
    <script>
        var img = document.getElementById('img')
        var open = true
        img.onclick = function(){
            if(open){
                img.src = './人头 (1).png'
                open = false
            }
            else{
                img.src = './人头.png'
                open = true
            }
        }
        /*

              添加内容进ul
                1- 获取元素（按钮、头像、文字、list）
                2- 给按钮绑定点击事件
                3- 获取头像地址，以及文字内容(如果内容为空不允许发送)
                4- 扔到list里面去
        */
        var button = document.getElementById('button')
        var input = document.getElementById('input')
        var text = document.querySelector('.text')
        button.onclick = function(){
            var value = input.value     
            if(value == '' ){
              alert('请输入合法字符')
            }
            else{
                if(open){
                    text.innerHTML = ' <li class="left"><img src="./人头.png" alt=""><p>'+ value +'</p></li>' + text.innerHTML
                }
                else{
                    text.innerHTML =  ' <li class="right"><img src="./人头 (1).png" alt=""><p>'+ value +'</p></li>' + text.innerHTML
                }
            }
        }
        /*
        注意: 
        1. 清除 text li 的浮动
        2. 加一个滚动条
        3. 开关 open 条件为真的话 
        4. 图片是是添加的并不是覆盖
        5. 给text 添加滚动条
        */
    </script>
</body>
</html>