使用原生javascript动态操作DOM对象，实现简易聊天机器人的功能。
<!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，翻页时输入的第一条信息无法显示。
