JavaScript的案例：模拟聊天界面发送信息

水深无声 2022-04-23 13:58 166阅读 0赞

## JavaScript的案例：模拟聊天界面发送信息 ##

这是我第一次写博客，也是一位刚入门的前端菜鸟！希望大家多多帮助与支持！

1.如图所示：点击下面头像即可切换用户，这也是我和我女朋友用的第一个情侣头像,你们莫被酸了哦，哈哈；  
2.在文本框输入信息点击发送，即可到达界面中；  
3.信息从下往上一次更新，当内容超出界面时，就会产生滚动条（由于没有可会的动图制作软软件，所以效果不是很理想，以后的内容会更加丰富的）

刚学习了动图制作就用上了

![模拟聊天动图][20190314161938891.gif]  
![聊天模拟图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlcmxpbl9Sb21l_size_16_color_FFFFFF_t_70]

## HTML代码 ##

## CSS代码 ##

li,ul{ 
                margin:0;
                padding:0;
            }
            li{ 
                list-style:none;
            }
            *{ 
                box-sizing:border-box;
            }
        #iphone6{ 
            width:351px;
            height:692px;
            background:url(img/bg.png) no-repeat;
            margin:0 auto;
            padding:80px 0 95px;
            }
        #wrap{ 
            width:313px;
            height:520px;
            margin:0 auto;
            background:linear-gradient(transparent,rgba(0,0,0,.9)),url(img/bg.jpg) no-repeat;
           
        }
        #box{ 
            width:100%;
            height:470px;
            margin:0px auto 10px;
            padding:10px;
            overflow:auto;
        }
        #oImg { 
            width:30px;
            height:30px;
            border-radius:5px;
            margin-left:10px;
            /* display:inline-block; */
            
        }
        #imag,#inps,#btn{ 
            float:left;
            margin-right:10px;
            /* display:inline-block; */
        }
        #inps{ 
            width:200px;
            height:30px;
            border-radius:5px;
            outline:none;
            border:1px solid #333;
            padding-left:10px;
        }
        #btn{ 
            margin-right:0px;
            width:43px;
            height:30px;
            background-color:rgba(33,165,33,1);
            outline:none;
            border:1px solid rgb(28, 141, 28);
            border-radius:5px;
            color:#fff;
    
        }
        #btn:hover{ 
            background-color:rgb(28, 141, 28);
        }
        #imag{ 
            margin:0;
            margin-right:10px;
        }
        #list li{ 
            width:100%;
            margin-bottom:10px;
        }
        #list .zuo{ 
            float:left;
        }
        #list .you{ 
            float:right;
        }
        #list .you img,#list .you div{ 
            float:left;
        }
        #list .you img{ 
            margin:0;
            margin-right:10px;
        }
        #list li .box4,#list li .box5{ 
            position:relative;
            padding:5px 10px;
            background-color:#7EDA2C;
            color:#333;
            border-radius:5px;
            height:31px;
        }
        .box5:after{ 
            content:"";
            position:absolute;
            border-left:none;
            border-top:6px solid transparent ;
            border-bottom:6px solid transparent ;
            border-right:6px solid #7EDA2C;
            top:9px;
            left:-6px;
        }
        .box4:after{ 
            content:"";
            position:absolute;
            border-right:none;
            border-top:6px solid transparent ;
            border-bottom:6px solid transparent ;
            border-left:6px solid #7EDA2C;
            top:9px;
            right:-6px;
        }
        #list .zuo img,#list .zuo div{ 
            float:right;
        }
        #list li div{ 
            line-height:1.5;
            color:#333;
            font-size:14px;
        }
        
        .clearfix::after{ 
            content:"";
            clear:both;
            display:block;
        }
        .clearfix{ 
            zoom: 1;
        }

## JS代码 ##

谢谢观赏！

[20190314161938891.gif]: /images/20220309/5dce2a8e5b3348368d12d8a74e03d447.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlcmxpbl9Sb21l_size_16_color_FFFFFF_t_70]: /images/20220309/e77806045ab643d8bf3922bbdbe374d8.png