使用原生javascript动态操作DOM对象，实现简易聊天机器人的功能。
纯html源代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言自动回复案例</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h2 {
color: brown;
text-align: center;
margin-top: 20px;
}
.container {
width: 400px;
height: 650px;
background-color: rgb(230, 230, 230);
margin: 20px auto;
padding-top: 20px;
}
.container>.list {
width: 350px;
height: 450px;
list-style-type: none;
background-color: white;
margin: auto;
overflow: hidden;
}
.container>form {
width: 360px;
height: 120px;
margin: 20px auto;
}
.container>form>textarea {
float: left;
}
.container>form button {
width: 50px;
height: 30px;
color: white;
border: none;
background-color: royalblue;
float: left;
margin: 37px 7px;
}
.container>form button:hover {
color: white;
background-color: tomato;
}
.container>form button:active {
background-color: rebeccapurple;
}
</style>
<body>
<h2>自动聊天</h2>
<div class="container">
<ul class="list"></ul>
<form action="" name="comment" method="POST">
<textarea name="content" id="" cols="30" rows="7"></textarea>
<button name="send">发送</button>
<button name="clean">清屏</button>
</form>
</div>
</body>
<script type="text/javascript">
// 获取留言显示区
var ul = document.querySelector("ul");
// 获取表单
var form = document.forms.namedItem("comment");
// 获取发送按钮
var send = document.querySelectorAll("button")[0];
// 获取清屏按钮
var clean = document.querySelectorAll("button")[1];
// 加入头像
var face = '<img src="face1.jpg" width=30 style="border-radius:50%">';
// 获取时间
var myDate = new Date();
// 创建一个计数变量用来控制聊天框中的内容条目数
var count = 0
// 创建按钮事件监听
send.addEventListener("click", function (ev) {
// 清除事件默认行为
ev.preventDefault();
// 创建新留言
var li = document.createElement("li");
// 判断用户输入内容是否为空
if (form.content.value.trim().length === 0) {
alert('请输入留言！');
// 设置焦点在输入区域
form.content.focus();
return false;
} else {
li.innerHTML = face + form.content.value + '<span style="padding-left:10px;">' + myDate.toLocaleTimeString() + '</span>' + '<a href="" onclick="del(this)" style="padding-left:15px;color:coral;text-decoration:none;">删除</a>';
}
// 将最新留言加入到聊天框顶部
if (ul.childElementCount === 0) {
ul.appendChild(li);
count += 1;
} else {
ul.insertBefore(li, ul.firstElementChild);
count += 1;
}
// 自动回复功能，setTimeout(方法,延迟时间)设定定时器
setTimeout(function () {
// 创建自动回复内容数组
var replys = ['你好呀，有什么事情吗？', '我是机器人，请说话。', '如果你要资询业务，请拨打1111。', '请提需求。', '我是您的回复助手！'];
//使用Math.floor()函数取数组的元素值，Math.random()*5取0-4之间的数字
// Math.floor()向下取整，Math.random()随机取>=0、<1的小数
var random = replys[Math.floor(Math.random() * 5)];
var reply = document.createElement("li");
var sevPic = '<img src="face2.jpg" width=30 style="border-radius:50%">';
// 随机取自动回复数组中的字符串
reply.innerHTML = sevPic + '<span style="color:#0aa344;">' + random + '</span>' + '<span style="padding-left:10px;">' + myDate.toLocaleTimeString() + '</span>';
// 将自动回复置顶到聊天窗口
ul.insertBefore(reply, ul.firstElementChild);
count += 1;
}, 500);
// 如果聊天条目超过10则清空条目
if (count > 10) {
ul.innerHTML = '';
count = 0;
}
// 发送完毕后清空输入框并设置焦点到输入框
form.content.value = null;
form.content.focus();
}, false);
// 创建清空聊天框按钮事件
clean.addEventListener("click", function (ev) {
// 清除事件默认行为
ev.preventDefault();
// 弹出确认框选确定后清空聊天框内容
if (confirm('是否清空聊天框？')) {
// 逐条删除聊天记录
var lis = document.querySelectorAll("li");
for (var i = lis.length - 1; i >= 0; i--) {
lis[i].parentElement.removeChild(lis[i]);
}
}
// 设置焦点在输入区域
form.content.focus();
}, false);
// 删除单条聊天记录
function del(ele) {
this.event.preventDefault();
return confirm('是否删除？') ? ul.removeChild(ele.parentElement) : false;
}
</script>
</html>
运行效果：
自动翻页
总结：
1.在原有基础上加入了时间及头像显示；
2.加入翻页功能；
3.加入清屏功能；
4.有一个小bug，翻页时输入的第一条信息无法显示。
2022-01-15 16:58