对话框

对话框

下面我们来看一下如何制作一个简易的对话框，首先我们要知道对话框需要些什么？1.一般对话的人有两个。2.在对话框输入内容后点击发送后，会在对话的显示区域显示出来。接下来我们看一下HTML部分，如图：

再给予了相应的id和样式后，我们在HTML中给予button按钮分配一个名为Chart的点击事件，然后在script标签里创建一个Chart的函数，再在函数里分别获取到对话的人（也就是id为who里的A和B），对话的内容（id为txt的input标签内的字符串），对话的显示区域里的对话（id为word里的li标签），如图：

记得在控制台输出一下获取到的内容，检查一下是否为自己想获取到的内容。
最后同过if···else···语句判断一下当前说话的人是谁（对话的人可以通过点击select标签来切换对话的人），如果为A则将获取到的li标签的类名赋值为A，然后再通过innerHTML属性将li的内容改为"同学A"+txt+""（其中txt为获取到的输入框里的内容）。最后通过append（）将li添加到对话的显示区域；如果为B则将获取到的li标签的类名赋值为B，然后再通过innerHTML属性将li的内容改为""+txt+“同学B”。最后通过append（）将li添加到对话的显示区域。如图：

这样一来一个简单的对话框就完成了，实际效果如下图所示：