第javascript實(shí)現(xiàn)簡(jiǎn)易聊天室聊天室是我們經(jīng)常見(jiàn)的，比如微信聊天界面、QQ聊天界面等等，一個(gè)簡(jiǎn)易的聊天室如下：

1.html代碼

div

div/div

formaction="#"

textareaid="$value"/textarea

buttontype="button"id="sub"發(fā)送/button

/form

/div

2.css代碼

.content{

border-radius:5px;

border:2pxsolid#cccccc;

width:500px;

height:700px;

margin:50pxauto0;

overflow:hidden;

.section{

width:500px;

height:569px;

overflow-x:hidden;

overflow-y:auto;

border-bottom:1pxsolid#cccccc;

padding-top:30px;

.section::-webkit-scrollbar{

display:none;

form{

width:500px;

height:100px;

formtextarea{

outline:none;

border:none;

display:block;

float:left;

width:370px;

height:100px;

font-size:25px;

text-align:top;

line-height:35px;

resize:none;

formbutton{

outline:none;

border:none;

display:block;

float:left;

width:130px;

height:100px;

formbutton:active{

background:#ccc;

.line{

width:500px;

overflow:hidden;

.left,.right{

height:auto;

font-size:25px;

line-height:50px;

border-radius:10px;

padding:010px;

overflow-wrap:break-word;

margin-bottom:20px;

.left{

max-width:400px;

margin-left:20px;

float:left;

background:rgb(243,244,245);

.right{

max-width:400px;

float:right;

margin-right:20px;

background:rgb(79,230,49);

}

3.js代碼

scripttype="text/javascript"

function$(str){

if(str[0]=='.'){

returndocument.getElementsByClassName(str.substring(1));

}elseif(str[0]=='#'){

returndocument.getElementById(str.substring(1));

}else{

returndocument.getElementsByTagName(str);

//以上代碼可以單獨(dú)封裝成一個(gè)函數(shù)

varcount=0;

$('#sub').unction(){

//當(dāng)點(diǎn)擊發(fā)送按鈕后，創(chuàng)建class名為line的盒子，來(lái)盛放聊天的內(nèi)容

vardiv=document.createElement('div');

div.className='line';

$('.section')[0].appendChild(div);

varstr=$('#$value').value;

varp=document.createElement('p');

if(count%2==1){

p.className='left';

}else{

p.className='right';

p.innerHTML=str;

$('#$value').value='';

div.appendCh