JS+HTML+CSS模仿微信界面发送信息

最新推荐文章于 2025-07-12 00:15:00 发布

UMU-UMU

最新推荐文章于 2025-07-12 00:15:00 发布

阅读量6.7k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： html javascript CSS 文章标签：微信界面发送消息仿微信界面发送消息

本文链接：https://blog.csdn.net/weixin_44772522/article/details/88554221

本文介绍了如何使用JavaScript、HTML和CSS来创建一个模仿微信聊天界面的功能，包括点击头像切换用户、输入信息并发送、新信息在上方显示等特性，旨在帮助前端新手学习实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS+HTML+CSS仿微信聊天界面
前端新人又来报道咯欢迎大家指教

功能：

1、点击头像可以模拟切换用户。

2、输入信息，点击发送可以显示在屏幕上。

3、新信息在上方，旧信息在下方，方便有滚动条的时候能直接看到新信息，而不是拖拉滚动条看下面的新内容。

HTML

<div id="iphone">
    <div id="wrap">
        <div id="div" class="clearfix">
            <ul id="ul" class="clearfix"></ul>
        </div>
        <div id="box" class="clearfix">
            <p id="imgWrap"><img id="img" src="images/1.jpg"></p>
            <input id="inp" type="text">
            <button id="btn">发送</button>
        </div>
    </div>
</div>

CSS

*{
        box-sizing: border-box;
    }
    p,ul,li{
        margin:0;
        padding:0;
    }
    .clearfix::after{
        content: "";
        display: block;
        clear: both;
    }
    #iphone{
        width: 351px;
        height: 692px;