QQ2006

QQ2006是什么

QQ2006是一个在浏览器里还原2006年腾讯QQ客户端界面的网页项目。打开后能看到经典蓝色标题栏、好友列表分组、底部系统托盘图标。

它不做即时通讯。没有真实登录、没有消息收发、没有服务器连接。所有交互都在前端完成，用来展示那个年代的UI布局和操作逻辑。

页面基于HTML/CSS/JavaScript构建，登录框、主面板、聊天窗口均为静态模拟。点击登录按钮不会发起网络请求。

QQ2006主要功能

• 登录面板模拟：设有账号输入框、密码框、登录按钮和“记住密码”勾选项，输入任意字符点击登录即进入主界面，不校验真实性。
• 好友列表渲染：按“我的好友”“陌生人”“黑名单”分组显示预置联系人，每组可折叠展开，头像和昵称硬编码在脚本里。
• 聊天窗口弹出：双击好友条目打开独立聊天窗，内含消息记录区、输入框、发送按钮和表情面板入口，发送后消息仅追加到本地DOM。
• 系统托盘图标：右下角生成QQ企鹅托盘图标，右键菜单有“上线”“离线”“退出”三个选项，切换状态会改变图标颜色。
• 经典音效触发：登录成功、收到消息、好友上线时播放短音频，音频文件内嵌为Base64，不依赖外部资源。
• 窗口拖拽与层级：主面板和聊天窗支持鼠标拖拽移动，点击窗口自动置顶，多个聊天窗之间可切换焦点。

有一点需要注意，所有状态在刷新页面后重置，没有本地存储持久化。

QQ2006使用要求

浏览器需支持ES6语法和Flexbox布局。Chrome 60+、Firefox 55+、Edge 15+可正常运行。IE系列不兼容。

屏幕分辨率建议1024×768以上。低于该分辨率时主面板右侧好友列表会出现横向滚动条。

不需要安装任何插件。不依赖Flash。不请求后端接口。打开页面即加载全部资源。

音频播放需浏览器允许自动播放策略，部分环境下首次点击登录按钮才能激活声音。

QQ2006核心优势

还原精度落在细节上。标题栏渐变色值取自2006年QQ 2006 Beta2版本的截图采样，好友列表分组箭头的旋转角度、聊天窗气泡的圆角半径都按原版比例设置。不是“大概像”，是对着老截图逐像素调。

零依赖单页运行。整个项目打包为一个HTML文件加一个JS文件，没有npm包、没有CDN外链、没有字体请求。断网状态下双击打开也能完整显示。

QQ2006如何使用

点击登录框的“登录”按钮进入主面板。不需要输入账号密码，直接点即可。

双击任意好友头像打开聊天窗口。在输入框打字后按回车或点“发送”，消息会出现在上方记录区。

右键点击右下角托盘图标，选择“离线”让企鹅变灰，选“上线”恢复彩色。选“退出”关闭主面板。

拖动标题栏可移动窗口位置。点击任意窗口会把它带到最前面。

QQ2006同类竞品对比

QQ2006应用场景

用于前端教学演示。展示如何用原生JS模拟桌面软件窗口管理、事件绑定和DOM动态追加。

用于怀旧内容配图。写2000年代互联网回忆文章时，截取界面作为插图，比找老照片清晰。

用于UI复原参考。做复古风格界面设计时，取色、量间距、看布局层级。

实际使用时会有差异。不同浏览器渲染出的字体抗锯齿效果不同，Windows和macOS下标题栏渐变过渡略有区别。

QQ2006适用人群

对2006版QQ界面有记忆、想再看一眼的用户。不需要注册，打开就能看。

前端初学者。代码结构简单，一个JS文件里集中了事件监听、DOM操作和样式切换，适合逐行读。

做怀旧主题内容的编辑或博主。需要一张干净、可交互的界面截图时直接打开录屏。

研究中文互联网产品UI演变的人。可对比同时期MSN Messenger、UC的界面布局差异。

首页截图