这个聊天室写的特别简易,比较适合刚开始学习js的同学借鉴,当然,写的不好,也希望诸位大神可以进行批评改正。
聊天室要求:
1。不能发空消息
2.敏感字* * *显示
3.图片替换开心,尴尬
4.显示聊天内容和时间
5 .每发一条信息,随机显示名称,先把一些名称定义到数组里面
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;风格类型=" text/css "比;
* {
box-sizing: border-box;
}
.left {
浮:左;
宽度:20%;
身高:650 px;
颜色:红色;
边界:1 px固体红;
边境:20 px固体cornflowerblue;
}
.center {
位置:相对;
浮:左;
宽度:60%;
身高:650 px;
边界:1 px固体darkcyan;
}
.chatList {
宽度:100%;
身高:500 px;
overflow-y:滚动;
}
.bottom {
位置:绝对的;
宽度:100%;
身高:150 px;
左:0;
底部:0;
背景:天蓝色;
}
.bottom textarea {
宽度:70%;
高度:100%;
字体大小:18 px;;
vertical-align:中间;
边界:1 px固体红;
背景:blanchedalmond;
}
.bottom输入{
宽度:80 px;
高度:40像素;
margin-left: 30 px;
}
铃声{
浮:正确;
颜色:# 000000;
边境:0;
border-left: 20 px固体cornflowerblue;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="左" id=白蟆北?
& lt;/div>
& lt; div类="中心" id=爸行摹北?
& lt; div类=" chatList " id=癱hatList”比;
& lt;/div>
& lt; div类="底"比;
& lt; textarea id="内容" name=澳谌荨弊４? lt;/textarea>
& lt;输入类型="按钮" name="发送" id=胺⑺汀奔壑?" https://www.yisu.com/zixun/点击发送”/比;
& lt;/div>
& lt;/div>
& lt; div类=白蟆北?
& lt; p> 1。不能发空消息& lt;/p>
& lt; p> 2。敏感字* * *显示& lt;/p>
& lt; p> 3。图片替换开心,尴尬& lt;/p>
& lt; p> 4。显示聊天内容和时间& lt;/p>
& lt; p> 5。每发一条信息,随机显示名称,先把一些名称定义到数组里面& lt;/p>
& lt;/div>
& lt;/body>
& lt;脚本type=" text/javascript祝辞//. getelementbyid (“chatList”) .scrollHeight;/*
添加敏感字替换成* *——-8.10
* */函数loadTime () {
var时间=new日期();
var小时=(time.getHours ()) .toString ();
如果(小时。长度& lt;2){
小时=" 0 " +小时;
}
var分钟=(time.getMinutes ()) .toString ();
如果(分钟。长度& lt;2){
分钟=" 0 " +分钟;
}
var秒=(time.getSeconds ()) .toString ();
如果(秒。长度& lt;2){
秒=" 0 " +秒;
}
var timeReturn=时间+“:”+分钟+”:“+秒;
. getelementbyid(“左”)。innerHTML=timeReturn;
返回timeReturn;
}
setInterval (“loadTime () ", 1000);
var chatContents=" ";
var计算=0;
函数sendMessage () {//通过调用randomName()函数来得到一个随机的名字
var name=randomName ();//通过调用randomColor()函数来得到一个随机的颜色
var colorR=randomColor ();//得到文本区域中的内容
var内容=. getelementbyid(“内容”)value;//判断输入内容是否为空
如果(内容==" "){
alert("输入内容不能为空! ! !”);
返回;
}//通过正则表达式来获取要替换的字符串
var regExp=/藏独|台独|傻逼|你大爷/g;
var regExp1=开/心/g;
var regExp2=/尴尬/g;//var imgReplace=content.replace (regExp,“高兴”);//获取开心图片路径
var path2=' & lt; img src=" https://www.yisu.com/zixun/img/chui.png "/祝辞的;//获取尴尬图片的路径
var path3=' & lt; img src=" https://www.yisu.com/zixun/img/mouse.png "/祝辞的;//敏感字替换;
内容=content.replace (regExp,“* * *”);//将开心替换成开心图片的字符串;//txtReplace(内容);
var imgReplace=content.replace (regExp1 path2);//警报(imgReplace);//将尴尬替换成尴尬图片的字符串;
imgReplace=imgReplace.replace (regExp2 path3);//警报(imgReplace);
var chatContent=" & lt; span> "+名称+“:”+“& lt;/span>”+ " " + imgReplace;//字符串拼接聊天记录
chatContents=chatContents + chatContent + " " + loadTime () +“& lt; br/祝辞”;
. getelementbyid (“chatList”)。innerHTML=chatContents;//点击发送后,文本区域中的内容设为空
. getelementbyid(“内容”).valuehttps://www.yisu.com/zixun/=?
var txtColor=document.getElementsByTagName(“跨度”)[数];
数+ +;//设置跨度的随机颜色
txtColor.style。颜色=colorR;
}
函数randomName () {
var i=方法(math . random () * (6 - 0 + 1) + 0);
var arrName=new Array(“果果”、“六六”,“格格”,“明明”,“小花”、“兰兰”,“花花”);
返回arrName[我];
}
函数randomColor () {
var r=方法(math . random () * (255 - 0 + 1) + 0) .toString (16);
如果(r。长度& lt;2){=" 0 " + r;
}
var g=方法(math . random () * (255 - 0 + 1) + 0) .toString (16);
如果(g。长度& lt;2){
g=" 0 " + g;
}
var b=方法(math . random () * (255 - 0 + 1) + 0) .toString (16);
如果(b)。长度& lt;2){
b=" 0 " + b;
}
返回“#”+ r + g + b;
}
& lt;/script>
& lt;/html>
