好资源导航 » 文章资讯 » js编写简单的聊天室功能

js编写简单的聊天室功能

2023-09-26 08:36:05 55

这个聊天室写的特别简易，比较适合刚开始学习js的同学借鉴，当然，写的不好，也希望诸位大神可以进行批评改正。

聊天室要求：

1.不能发空消息
2.敏感字***显示
3.图片替换开心，尴尬
4.显示聊天内容和时间
5.每发一条信息，随机显示名称，先把一些名称定义到array里面







*{
box-sizing:border-box;
}
.left{
float:left;
width:20%;
height:650px;
color:red;
border:1pxsolidred;
border-right:20pxsolidcornflowerblue;
}
.center{
position:relative;
float:left;
width:60%;
height:650px;
border:1pxsoliddarkcyan;
}
.chatList{
width:100%;
height:500px;
overflow-y:scroll;
}
.bottom{
position:absolute;
width:100%;
height:150px;
left:0;
bottom:0;
background:skyblue;
}
.bottomtextarea{
width:70%;
height:100%;
font-size:18px;;
vertical-align:middle;
border:1pxsolidred;
background:blanchedalmond;
}
.bottominput{
width:80px;
height:40px;
margin-left:30px;
}
.right{
float:right;
color:#000000;
border-right:0;
border-left:20pxsolidcornflowerblue;
}

1.不能发空消息

2.敏感字***显示

3.图片替换开心，尴尬

4.显示聊天内容和时间

5.每发一条信息，随机显示名称，先把一些名称定义到array里面

//document.getElementById("chatList").scrollHeight; /* 添加敏感字替换成**---8.10 **/ functionloadTime(){ vartime=newDate(); varhours=(time.getHours()).toString(); if(hours.length<2){ hours="0"+hours; } varminutes=(time.getMinutes()).toString(); if(minutes.length<2){ minutes="0"+minutes; } varseconds=(time.getSeconds()).toString(); if(seconds.length<2){ seconds="0"+seconds; } vartimeReturn=hours+":"+minutes+":"+seconds; document.getElementById("left").innerHTML=timeReturn; returntimeReturn; } setInterval("loadTime()",1000); varchatContents=""; varcount=0; functionsendMessage(){ //通过调用randomName()函数来得到一个随机的名字 varname=randomName(); //通过调用randomColor()函数来得到一个随机的颜色 varcolorR=randomColor(); //得到textarea中的内容 varcontent=document.getElementById("content").value; //判断输入内容是否为空 if(content==""){ alert("输入内容不能为空！！！"); return; } //通过正则表达式来获取要替换的字符串 varregExp=/藏独|台独|傻逼|你大爷/g; varregExp1=/开心/g; varregExp2=/尴尬/g; //varimgReplace=content.replace(regExp,"高兴"); //获取开心图片路径 varpath1=''; //获取尴尬图片的路径 varpath2=''; //敏感字替换； content=content.replace(regExp,"***"); //将开心替换成开心图片的字符串； //txtReplace(content); varimgReplace=content.replace(regExp1,path1); //alert(imgReplace); //将尴尬替换成尴尬图片的字符串； imgReplace=imgReplace.replace(regExp2,path2); //alert(imgReplace); varchatContent=""+name+":"+""+""+imgReplace; //字符串拼接聊天记录 chatContents=chatContents+chatContent+""+loadTime()+"
"; document.getElementById("chatList").innerHTML=chatContents; //点击发送后，textarea中的内容设为空 document.getElementById("content").value=""; vartxtColor=document.getElementsByTagName("span")[count]; count++; //设置span的随机颜色 txtColor.style.color=colorR; } functionrandomName(){ vari=parseInt(Math.random()*(6-0+1)+0); vararrName=newArray("果果","六六","格格","明明","小花","兰兰","花花"); returnarrName[i]; } functionrandomColor(){ varr=parseInt(Math.random()*(255-0+1)+0).toString(16); if(r.length<2){ r="0"+r; } varg=parseInt(Math.random()*(255-0+1)+0).toString(16); if(g.length<2){ g="0"+g; } varb=parseInt(Math.random()*(255-0+1)+0).toString(16); if(b.length<2){ b="0"+b; } return"#"+r+g+b; }

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

返回顶部
514930285
czq8825@qq.com

js编写简单的聊天室功能

热门推荐

随机推荐