html模拟聊天框实现，仅用html，css，js实现
更多静态模板，小米官网，原神官网，各种可视化大屏请前往https://lilisen.cn/了解
html模拟聊天框一共分为两大部分，一部分是登录，一部分是聊天框内容
聊天框登录(比较简陋，可以美化哈)
聊天框登录代码（内含登录的js，html）
聊天登录框
用户名：
房间：
聊天框内容（这里的undefined是因为前面登录没有输入用户名，所以默认是undefined，我是通过登录跳转传参实现用户名显示的）
发送表情包 这里发送表情按钮可以发送表情包，具体实现过程代码我都已经注释了，这里简单说一下，这里的每一张表情包都是x.gif的格式，x是数字就是1，2，3这样，所以我打算为每一张表情包绑定下标，根据下标去定位我当前点击的表情包的索引，然后通过.innerHTML的方式把它显示在聊天框中。
过滤敏感词 在发送信息时候自动过滤敏感词，并显示*号，大概过程是先建立正则表达式数组arr，通过for语句if语句来判断敏感词的个数，i==0就是靠，就一个敏感词，所以就一个*，以此类推
改变文本颜色，背景颜色 大概就是为select按钮绑定事件，再通过option的value值来选定颜色，再.style.color来改变改变颜色，改变背景颜色也大差不差，代码我已经注释了
聊天框代码html
聊天室——————————————JavaScrpit房间
12-01 09:53:53 王者说：以后请多关照
12-01 09:35:06 王者说：大家好
12-01 09:53:53 服务器说：欢迎用户来到王者光临王者聊天室
用户列表
- admin
- hello
- 王者
聊天框js（index.js）
window.onload = function(){
var username = decodeURI(location.search.split("=")[1]);/* 获取username decodeURI解码，不解会乱码中文*/
console.log(username)
var Words = document.getElementById("words");/* 显示对话 */
var TalkWords = document.getElementById("talkwords");/* 输入框 */
var TalkSub = document.getElementById("talksub");/* 发送信息按钮 */
var talksub_img=document.getElementById("talksub_img")/* 发送表情按钮 */
var image_list = document.getElementById("image_list")/* 获取图片列表 */
var image_icon=document.getElementById("image_icon")/* 获取表情包图片 */
var title=document.getElementById("title")/* 改变标题 */
title.innerHTML=username+'聊天室——————————————JavaScrpit房间'
var talk1=document.getElementById("talk1")/* 改变对话 */
var talk2=document.getElementById("talk2")
var talk3=document.getElementById("talk3")
talk1.innerHTML='12-01 09:53:53 '+username+'说：以后请多关照'
talk2.innerHTML='12-01 09:35:06 '+username+'说：大家好'
talk3.innerHTML='12-01 09:53:53 服务器说：欢迎用户'+username+'光临'+username+'聊天室'
var user=document.getElementById("user")/* 改变用户 */
user.innerHTML=username
/* 表情包 */
var image_con=document.getElementsByClassName("image_con")
/* console.log(image_con.length) */
/* 为每个表情包图片绑定点击事件*/
image_icon.onclick=function(){
for(var i=0;i';
Words.innerHTML = Words.innerHTML + str;
}
}
/* 这里设置表情包框显示余隐藏，一开始我设置隐藏，点击就切换为显示block */
if(image_list.style.display=="block"){
image_list.style.display="none"
console.log(image_con.length)
}else{
image_list.style.display="block"
}
}
var talksub_color=document.getElementById("talksub_color")/* 点击切换文字颜色 */
var talksub_bgcolor=document.getElementById("talksub_bgcolor")/* 点击切换背景颜色 */
talksub_color.onclick=function(){
var asay=document.getElementsByClassName("asay")
var txcol=document.getElementById("talksub_color").value
console.log(asay);
for(var j=0;j';
/* 返回到html显示 */
Words.innerHTML = Words.innerHTML + str;
TalkWords.value=""
}
}
登录和聊天框css
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.talk{
margin: 0 auto;
width:100%;
height:704px;
position: relative;
}
.title{
line-height: 100px;
text-align: center;
width:100%;
height: 100px;
position: relative;
top: 0;
font-size: 30px;
background-color: rgb(228, 225, 50);
border: 1px solid black;
}
.user_list{
width: 20%;
height: 604px;
position: absolute;
background-color: aqua;
right:0px;
top: 100px;
text-align: center;
font-size: 20px;
border: 1px solid black;
}
.user_list_title{
font-size: 25px;
padding-bottom: 20px;
}
.user_list li{
padding-bottom: 10px;
}
#image_list{
width: 500px;
height: 300px;
border: 1px red solid;
bottom: 72px;
right: 125px;
position: absolute;
}
.talk_con{
width: 80%;
position: absolute;
top: 100px;
border:1px solid #666;
background:#fff;
}
.talk_show{
width:80%;
height:522px;
border:1px solid #666;
background:#fff;
margin:10px auto 0;
overflow:auto;
}
.talk_input{
position: relative;
left: 110px;
width:892px;
height: 70px;
background-color: #ef8201;
border-left: 1px solid black;
border-right: 1px solid black;
}
.talk_word{
margin-top: 20px;
width:400px;
height:26px;
padding:0px;
float:left;
outline:none;
text-indent:10px;
border: 1px solid black;
margin-left: 30px;
}
.talk_sub{
margin-top: 20px;
width:60px;
height:30px;
float:left;
margin-left:10px;
}
.atalk{
margin:10px;
}
.atalk span{
display:inline-block;
background:#134a69;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.btalk{
margin:10px;
text-align:right;
}
.btalk span{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.back input{
position:absolute;
z-index: 999;
top: 50px;
right: 120px;
width: 50px;
}
文件这样放哦
所需图片资源已上传主页资源，不需要积分即可下载
好了，完结撒花