本文详细介绍了如何使用HTML和JavaScript实现一个实时聊天系统，包括内容输入验证、发送功能、聊天内容显示、滚动条处理及样式控制。通过val(), html()和addClass()方法实现交互，同时展示了如何通过数组管理用户头像和昵称的动态显示。
需求：
训练要点
1
、使用
html( )
获取和设置页面内容
2
、使用
val( )
获取聊天内容
3
、使用
addClass( )
为指定元素追加样式
4
、使用数组保存聊天人员头像和昵称
5
、使用随机函数获取聊天人员的头像和昵称
需求说明
1
、在输入框中输入内容，单击“发送”按钮，显示聊天内容，使用
addClass( )
为聊天内容添加背景颜色、边框为圆角；聊天内容发送完毕后，清空输入框
2
、聊天内容较多，聊天内容在垂直方向显示滚动条
3
、输入框中没有输入内容，单击“发送”按钮，不作任何操作
实现思路
1
、使用数组保存聊天者的头像和昵称
2
、使用
val()
获取输入框中的内容，使用
length
属性判断是否输入内容
3
、获取当前聊天内容
4
、使用
html( )
把当前聊天内容显示在聊天区域
5
、使用
addClass( )
为当前聊天内容添加背景样式
效果如下图示
代码：
扫一扫
1167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
