javascript实现简易聊天室

聊天室是我们经常见的，比如微信聊天界面、QQ聊天界面等等，一个简易的聊天室如下：

1.html代码

div class=' content ' div class=' section '/div form action=' # '文本区域id=' $ value '/文本区域按钮类型=' button ' id=' sub '发送/button /form/div2.css代码。内容{边框半径： 5pxborder: 2px固体# cccccc宽度： 500像素；高度： 700像素；余量： 50px自动0;飞越：隐藏；} .截面{宽度： 500像素高度： 569像素；溢出-x:隐藏；溢出-y:自动；边框-底部： 1px实心# ccccccpadding-top : 30px；} .第：节-网络工具包-滚动条{显示屏：无；}表单{ width: 500px高度： 100像素；}表单文本区域{大纲视图：无；border:无；显示器：块；向左浮动：宽度： 370像素；高度： 100像素；font-size : 25px文本对齐：顶部；线高： 35pxresize:无；}表单按钮{ outline:无；border:无；显示器：块；向左浮动：宽度： 130像素；高度： 100像素；}表单按钮：活动{后台： # CCC} .线{宽度： 500像素飞越：隐藏；} .向左，向右。右{ height : auto font-size : 25px；线高： 50px边框半径： 10pxpadding: 0 10px溢出包装：断字；边距-底部： 20px} .左侧{最大宽度： 400像素；左边距左侧： 20像素向左浮动：背景： rgb(243，244，245)；} .右侧{最大宽度： 400像素；向右浮动：右边距： 20px背景： rgb(79，230，49)；}3.js代码

脚本类型="文本/JavaScript "函数$(str){ if (str[0]==" "){返回文档。getelementsbyclassname(str。子串(1))；} else if(str[0]==' # '){返回文档。getelementbyid(str。子串(1))；} else {返回文档。getelementsbytagname(str)；} } //以上代码可以单独封装成一个函数定义变量计数=0;$('#sub ').onclick=function(){ //当点击发送按钮后，创建班级名为线条的盒子，来盛放聊天的内容var div=文档。创建元素(' div ')；div .类名=' line$('。节')[0]。appendChild(div)；var str=$('#$value ').价值；var p=文档。创建元素(' p ')；如果(计数% 2==1){ p . class name=' left '；} else { p . class name=' right } p . innerHTMl=str $(' # $ value ').值=' ';div。append child(p)；计数；} /script4 .效果图

好啦，一个简易的聊天室就制作完啦！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。