淘气的小丁-简易聊天器

简易聊天器

1. 我们先放一个div，给他一个类为box，并且给他设置样式：.box {width: 500px; height: 600px; border: 2px solid #333; margin: 100px auto; background-image:url('../../Content/images/IMG_20210214_182510.jpg'); }
2. 我们在里面放两个div，分别给他们一个类为box1，box2，设置一下box1的样式：  .box1 { width: 450px; height: 500px; border: 2px solid #333; margin: 10px 25px; background-image: url('../../Content/images/picture.jpg'); overflow: auto; }。
3. 我们先写box1里面的布局，在box1里面我们又放了两个div，分别给他们一个类为box11，box12，我们先给他们设置共同的样式：.box1 div{width:100%; box-sizing:border-box; padding:10px; }再给box12设置样式：  .box1 .box12{text-align:right; min-width:400px; }。
4. 我们再在这两个div中都放两个span标签，第一个div里面的span标签的文本分别为：A，在干嘛，第二个div里面的span标签的文本分别为：在干嘛，B，并且给有在干嘛文本的span标签一个类为text-break，并且设置一下样式：word-wrap: break-word!important;/*用来换行*/。
5. 现在我们来写box2的布局，里面我们放一个select标签和两个input标签，select标签里面再放两个option标签，并且他们的value值分别为0，1，文本分别为A,B，第一个inpu标签给他一个类为input，并且设置一下它的宽，设置为340px，第二个input标签让它的type值为button并且它的value值为发送。

6. 

 

接下来我们写jQuery

1. 首先我们写一个简写的ready事件。
2. 选择到第二个input标签，并且给他绑定点击事件，然后我们声明三个变量分别为s，ss，text，将获取的select的value值赋值给变量s，将空赋值给变量ss,将第一个input标签的value值赋值给变量text。
3. 再做一个判断，如果变量text等于空就弹出警告框，再跳出不再执行后面的代码。
4. 再来判断一下变量s，如果变量s等于0，则将'<div class="box11"> <span>  A </span><span class="text-break">' + text + '</span></div>';赋值给变量ss，否则如果变量s等于1，则将'<div class="box12"> <span class="text-break">' + text + ' </span><span>B</span></div>';赋值给变量ss。
5. 最后获取一下box1，将变量ss添加进去，然后获取一下第一个input标签，让它的value值为空，这样就完成了一个简易聊天器。效果如下：