模拟手机聊天
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术: HTML CSS JS
作者:
撰写时间:2021.5.1
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面先利用HTML CSS完成框架,如图
边框,背景颜色,人物头像,对话框,输入框,人物选择框加上css一一显示出来,效果如图所示
可以看到,是4人聊天,并不是正常的双人聊天,而是一个群聊。
接着到js部分,先获取元素
接着绑定点击事件,获取到值
加上一点点细节,判断输入是不是空
到了最关键的一步,判断是否在说话
输出结果
接下来看看效果
可以看到,4人聊天已经完成,不过,输入过多的内容,会超出设定的边框,然后加上一点点细节
再看看加上一点点细节的结果
模拟手机聊天就完成啦。