Collection
Collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天窗口实现</title>
<style>
#box {
width: 300px;
height: 300px;
background-color: wheat;
}
#text {
width: 230px;
height: 60px;
background-color: green;
font-size: 1.2em;
}
button {
width: 70px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<h1>聊天窗口</h1>
<div id="box"></div>
<input type="text" id="text" value="">
<button id="btn">提交</button>
<script>
var box = document.getElementById('box')//获取聊天窗口内容
var text = document.getElementById('text')//获取文本内容
var btn = document.getElementById('btn')//获取提交按钮
//添加点击事件onclick
btn.onclick = function () {
var str1 = '<span>西门庆:</span>'
var str2 = '<span>潘金莲:</span>'
var innerHTML = [//做一个敏感词过滤词的数组
'他妈的'
];
for (var i=0;i<innerHTML.length;i++){
text.value=text.value.replace(innerHTML[i],'***')//replace替换当前
}
box.innerHTML += str1+text.value + '<br>'//将文本内容发送到聊天窗口
var bb = box.innerHTML += str2+'bb'+ '<br>'
text.value=''//清空文本框
}
</script>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
