聊天框小案例

聊天框案例简单的用到了if判断

如图：

    

首先新建一个html文件，写好我们需要的内容

两个对话框，但两个对话框是在一个div里的，而这个div会起到关键的作用，因为在写js代码时要获取到它，所有需要提前给它设置好id以方便后面获取。

下拉框，下拉框里有两个内容所有要写两个option，也要给两个option设置好value值，第一个是0，第二个是1.这样是为了后面更好的进行判断，当然也要给下拉框设置好id以方便后面获取。

输入框和按钮也要设置id以方便后面获取。但要注意我这里的发送按钮是input标签，要想input标签设置成按钮必须设置它的type为button。

      

 

为了美观一些需要给聊天框设置一些样式，比如聊天框的大小、边框和颜色。

小编这里不但设置了聊天框的样式，还设置了对话框的样式、下拉框的样式、输入框的样式和按钮的样式，但也要注意样式设置的不恰当可能会导致对话出错或者是效果不好。

接下来就是js部分的内容

在界面完成加载后获取到显示区域（对话框）、下拉列表、输入框。并给发送按钮绑定点击事件，然后在点击事件中声明变量sVal01=oWho.value；sVal02=oWords。value并声明变量sTr为空。

判断输入框中是否有内容，有的话弹出警示框内容为“发送内容不能为空！”没有的话则运行下一行代码。

最后判断判断sVal01是否等于0，等于0的话设置sTr = '<div class="atalk"><span>A说:'+sVal02+'</span></div>';反之则设置sTr = '<div class="btalk"><span>B说:'+sVal02+'</span></div>';

最后设置显示区域的html内容为otalkShow.innerHTML+sTr;