Blogger Information
Blog 100
fans 8
comment 2
visits 150058
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
聊天机器人自动回复(纯前端操作DOM实例)
lilove的博客
Original
2480 people have browsed it

使用原生javascript动态操作DOM对象,实现简易聊天机器人的功能。

  • 纯html源代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>留言自动回复案例</title>
  7. </head>
  8. <style type="text/css">
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. h2 {
  15. color: brown;
  16. text-align: center;
  17. margin-top: 20px;
  18. }
  19. .container {
  20. width: 400px;
  21. height: 650px;
  22. background-color: rgb(230, 230, 230);
  23. margin: 20px auto;
  24. padding-top: 20px;
  25. }
  26. .container>.list {
  27. width: 350px;
  28. height: 450px;
  29. list-style-type: none;
  30. background-color: white;
  31. margin: auto;
  32. overflow: hidden;
  33. }
  34. .container>form {
  35. width: 360px;
  36. height: 120px;
  37. margin: 20px auto;
  38. }
  39. .container>form>textarea {
  40. float: left;
  41. }
  42. .container>form button {
  43. width: 50px;
  44. height: 30px;
  45. color: white;
  46. border: none;
  47. background-color: royalblue;
  48. float: left;
  49. margin: 37px 7px;
  50. }
  51. .container>form button:hover {
  52. color: white;
  53. background-color: tomato;
  54. }
  55. .container>form button:active {
  56. background-color: rebeccapurple;
  57. }
  58. </style>
  59. <body>
  60. <h2>自动聊天</h2>
  61. <div class="container">
  62. <ul class="list"></ul>
  63. <form action="" name="comment" method="POST">
  64. <textarea name="content" id="" cols="30" rows="7"></textarea>
  65. <button name="send">发送</button>
  66. <button name="clean">清屏</button>
  67. </form>
  68. </div>
  69. </body>
  70. <script type="text/javascript">
  71. // 获取留言显示区
  72. var ul = document.querySelector("ul");
  73. // 获取表单
  74. var form = document.forms.namedItem("comment");
  75. // 获取发送按钮
  76. var send = document.querySelectorAll("button")[0];
  77. // 获取清屏按钮
  78. var clean = document.querySelectorAll("button")[1];
  79. // 加入头像
  80. var face = '<img src="face1.jpg" width=30 style="border-radius:50%">';
  81. // 获取时间
  82. var myDate = new Date();
  83. // 创建一个计数变量用来控制聊天框中的内容条目数
  84. var count = 0
  85. // 创建按钮事件监听
  86. send.addEventListener("click", function (ev) {
  87. // 清除事件默认行为
  88. ev.preventDefault();
  89. // 创建新留言
  90. var li = document.createElement("li");
  91. // 判断用户输入内容是否为空
  92. if (form.content.value.trim().length === 0) {
  93. alert('请输入留言!');
  94. // 设置焦点在输入区域
  95. form.content.focus();
  96. return false;
  97. } else {
  98. 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>';
  99. }
  100. // 将最新留言加入到聊天框顶部
  101. if (ul.childElementCount === 0) {
  102. ul.appendChild(li);
  103. count += 1;
  104. } else {
  105. ul.insertBefore(li, ul.firstElementChild);
  106. count += 1;
  107. }
  108. // 自动回复功能,setTimeout(方法,延迟时间)设定定时器
  109. setTimeout(function () {
  110. // 创建自动回复内容数组
  111. var replys = ['你好呀,有什么事情吗?', '我是机器人,请说话。', '如果你要资询业务,请拨打1111。', '请提需求。', '我是您的回复助手!'];
  112. //使用Math.floor()函数取数组的元素值,Math.random()*5取0-4之间的数字
  113. // Math.floor()向下取整,Math.random()随机取>=0、<1的小数
  114. var random = replys[Math.floor(Math.random() * 5)];
  115. var reply = document.createElement("li");
  116. var sevPic = '<img src="face2.jpg" width=30 style="border-radius:50%">';
  117. // 随机取自动回复数组中的字符串
  118. reply.innerHTML = sevPic + '<span style="color:#0aa344;">' + random + '</span>' + '<span style="padding-left:10px;">' + myDate.toLocaleTimeString() + '</span>';
  119. // 将自动回复置顶到聊天窗口
  120. ul.insertBefore(reply, ul.firstElementChild);
  121. count += 1;
  122. }, 500);
  123. // 如果聊天条目超过10则清空条目
  124. if (count > 10) {
  125. ul.innerHTML = '';
  126. count = 0;
  127. }
  128. // 发送完毕后清空输入框并设置焦点到输入框
  129. form.content.value = null;
  130. form.content.focus();
  131. }, false);
  132. // 创建清空聊天框按钮事件
  133. clean.addEventListener("click", function (ev) {
  134. // 清除事件默认行为
  135. ev.preventDefault();
  136. // 弹出确认框选确定后清空聊天框内容
  137. if (confirm('是否清空聊天框?')) {
  138. // 逐条删除聊天记录
  139. var lis = document.querySelectorAll("li");
  140. for (var i = lis.length - 1; i >= 0; i--) {
  141. lis[i].parentElement.removeChild(lis[i]);
  142. }
  143. }
  144. // 设置焦点在输入区域
  145. form.content.focus();
  146. }, false);
  147. // 删除单条聊天记录
  148. function del(ele) {
  149. this.event.preventDefault();
  150. return confirm('是否删除?') ? ul.removeChild(ele.parentElement) : false;
  151. }
  152. </script>
  153. </html>

运行效果:

  • 自动翻页

总结:

1.在原有基础上加入了时间及头像显示;
2.加入翻页功能;
3.加入清屏功能;
4.有一个小bug,翻页时输入的第一条信息无法显示。

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:能发现bug是好现象, 然后就是想办法去解决
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post