search

博客列表 >留言板与自动客服

留言板与自动客服

天宁
天宁原创
2022年04月04日 00:08:30351浏览

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <title>留言板客服</title>
  8.         <link rel="stylesheet" href="static/css/reset.css" />
  9.         <link rel="stylesheet" href="static/css/main.css" />
  10.     </head>
  11.     <body>
  12.         <!-- 头部 -->
  13.         <header>
  14.             <a href="">留言板</a>
  15.             <a href="">关于我们</a>
  16.         </header>
  17.         <!-- 主体部分 -->
  18.         <main>
  19.             <div class="box">
  20.                 <textarea onkeydown="addMsg(this)" placeholder="请输入留言内容"></textarea>
  21.                 <button onclick="clickbutton()">发表留言</button>
  22.             </div>
  23.             <a href=""></a>
  24.             <h2>留言列表</h2>
  25.             <ul class="content-list"></ul>
  26.         </main>
  27.         <!-- 底部客服 -->
  28.         <footer>
  29.             <div class="kf">
  30.                 <a href="javascript:;">
  31.                     <img src="static/image/img-info24.svg" alt="" />
  32.                 </a>
  33.                 <span>有问题请点我哦!</span>
  34.                 <a href="javascript:;" onclick="showkf()">
  35.                     <img src="static/image/to-maxWindow.svg" alt="" />
  36.                 </a>
  37.             </div>
  38.             <div class="kf_box" style="display: none">
  39.                 <!-- 客服标题 -->
  40.                 <div class="title">
  41.                     <span>客服系统</span>
  42.                     <a href="JavaScript:;" onclick="closekf()">
  43.                         <img src="static/image/to-minWindow.svg" alt="" />
  44.                     </a>
  45.                 </div>
  46.                 <!-- 客服界面主体 -->
  47.                 <div class="kf_main">
  48.                     <div class="msg">
  49.                         <p class="left">请问你有什么问题吗?</p>
  50.                     </div>
  51.                     <div contenteditable="true" placeholder="请输入文字" class="text_area"></div>
  52.                     <button onclick="addMsg_kf()">发送</button>
  53.                 </div>
  54.             </div>
  55.         </footer>
  56.         <script>
  57.             // 显示客服界面
  58.             function showkf() {
  59.                 let kefu = document.querySelector('.kf_box');
  60.                 kefu.style.display = 'block';
  61.             }
  62.             // 关闭客服界面
  63.             function closekf() {
  64.                 let kefu = document.querySelector('.kf_box');
  65.                 kefu.style.display = 'none';
  66.             }
  67.             //把用户输入的问题发送到聊天界面
  68.             function addMsg_kf() {
  69.                 let msg = document.querySelector('.kf_box .kf_main .text_area');
  70.                 let msgBox = document.querySelector('.kf_box .kf_main .msg');
  71.                 if (msg.innerText.trim().length === 0) {
  72.                     console.log('消息为空');
  73.                     msg.innerText = null;
  74.                     msg.focus();
  75.                 } else {
  76.                     const p = document.createElement('p');
  77.                     p.className = 'right';
  78.                     p.textContent = msg.innerText;
  79.                     msgBox.insertAdjacentElement('beforeEnd', p);
  80.                     msg.innerText = null;
  81.                     msg.focus();
  82.                 }
  83.             }
  84.             //定时器监控消息
  85.             setInterval('monitoring()', 1000);
  86.             let msgNumber = 1;
  87.             function monitoring() {
  88.                 // let rightMsg = document.querySelector('.kf_box .kf_main .msg .right');
  89.                 let rightMsg = document.querySelector('.kf_box .kf_main .msg');
  90.                 console.log(rightMsg.children.length);
  91.                 console.log('当前检测消息数量:' + msgNumber);
  92.                 if (rightMsg.children.length > msgNumber) {
  93.                     console.log('有新消息');
  94.                     console.log(rightMsg.innerText);
  95.                     const p = document.createElement('p');
  96.                     p.className = 'left';
  97.                     p.textContent = '你好我是客服系统';
  98.                     rightMsg.insertAdjacentElement('beforeEnd', p);
  99.                     msgNumber = msgNumber + 2;
  100.                 } else {
  101.                     console.log('暂时没有新消息');
  102.                 }
  103.             }
  104.             // 1.获取文本框的内容
  105.             // 2.判断文本框留言内容是否为空
  106.             // 3.有内容则把留言添加到列表中,为空则返回
  107.             // 4.将输入框中的前一条留言清空
  108.             // 5.焦点重置
  109.             function clickbutton() {
  110.                 let ul = document.querySelector('.content-list');
  111.                 let input = document.querySelector('.box textarea');
  112.                 if (input.value.trim().length === 0) {
  113.                     alert('内容为空,请输入留言内容');
  114.                 } else {
  115.                     // 将内容添加到列表中
  116.                     console.log(input.value);
  117.                     // 创建一个li标签,并添加进去
  118.                     const li = document.createElement('li');
  119.                     li.innerHTML = input.value + '<button onclick = "del(this.parentNode)">删除</button><hr/>';
  120.                     ul.insertAdjacentElement('afterBegin', li);
  121.                     input.value = null;
  122.                     input.focus();
  123.                 }
  124.             }
  126.             function addMsg(ele) {
  127.                 // console.log(event.key);
  128.                 if (event.key === 'Enter') {
  129.                     let ul = document.querySelector('.content-list');
  130.                     let input = document.querySelector('.box textarea');
  131.                     if (input.value.trim().length === 0) {
  132.                         alert('内容为空,请输入留言内容');
  133.                     } else {
  134.                         // 将内容添加到列表中
  135.                         console.log(input.value);
  136.                         // 创建一个li标签,并添加进去
  137.                         const li = document.createElement('li');
  138.                         li.innerHTML = input.value + '<button onclick = "del(this.parentNode)">删除</button><hr/>';
  139.                         ul.insertAdjacentElement('afterBegin', li);
  140.                         input.value = null;
  141.                         //多行文本回车不换行
  142.                         event.preventDefault();
  143.                         ele.focus();
  144.                     }
  145.                 }
  146.             }
  148.             function addStyle(value, tag) {}
  149.             function del(ele) {
  150.                 if (confirm('是否删除?')) {
  151.                     ele.remove();
  152.                 }
  153.             }
  154.         </script>
  155.     </body>
  156. </html>

main.css

  1. /* 头部 */
  2. header {
  3.     display: flex;
  4.     height: 60px;
  5.     background-color: #f8f8f8;
  6.     justify-content: space-around;
  7.     align-items: center;
  8. }
  10. /* 设置留言板字体大小 */
  11. header > a:first-of-type {
  12.     font-size: 25px;
  13.     color: #858585;
  14. }
  16. /* 主体部分 */
  17. /* 留言板整体居中 */
  18. main .box {
  19.     display: flex;
  20.     flex-flow: column nowrap;
  21.     align-items: center;
  22.     margin: 20px;
  23. }
  25. /* 设置一下文本输入框样式 */
  26. main .box textarea {
  27.     border: 1px solid #ccc;
  28.     border-radius: 5px;
  29.     font-size: 20px;
  30.     padding: 5px;
  31.     width: 800px;
  32.     height: 120px;
  33. }
  35. /* 设置按钮样式 */
  36. main .box button {
  37.     width: 800px;
  38.     height: 40px;
  39.     margin: 20px;
  40.     background-color: #0088ff;
  41.     border: none;
  42.     color: white;
  43.     margin: 20px 2px;
  44.     cursor: pointer;
  45.     border-radius: 5px;
  46. }
  48. main .box button:hover {
  49.     background-color: #8eb1cf;
  50. }
  52. main .box button:active {
  53.     background-color: red;
  54. }
  56. /* 留言列表 */
  57. main h2 {
  58.     position: relative;
  59.     left: calc((100vw - 800px) / 2);
  60. }
  62. /* 留言列表设置 */
  63. main ul {
  64.     position: relative;
  65.     left: calc((100vw - 800px) / 2);
  66. }
  67. /* 设置li的距离 */
  68. main ul li {
  69.     margin: 20px 0;
  70.     width: 800px;
  71. }
  72. /* 设置一下按钮的样式 */
  73. main ul li button {
  74.     border-radius: 5px;
  75.     outline: none;
  76.     border-width: 0px;
  77.     background-color: #ffffff;
  78.     color: blue;
  79.     margin-left: 20px;
  80.     padding: 5px;
  81.     cursor: pointer;
  82. }
  84. main ul li button:active {
  85.     color: red;
  86. }
  88. /* 在线客服 */
  89. footer .kf {
  90.     background-color: #1798fc;
  91.     width: 225px;
  92.     height: 42px;
  93.     display: flex;
  94.     justify-content: space-between;
  95.     align-items: center;
  96.     /* 固定到页面右下角 */
  97.     position: fixed;
  98.     right: 0;
  99.     bottom: 0;
  100. }
  101. /* 设置客服提示字体颜色 */
  102. footer .kf span {
  103.     color: #ffffff;
  104. }
  105. /* 设置a标签样式 */
  106. footer .kf > a {
  107.     background-color: #127aca;
  108.     width: 42px;
  109.     height: 100%;
  110.     padding: 10px;
  111. }
  112. /* 第二个a标签覆盖上面的颜色 */
  113. footer .kf > a:last-of-type {
  114.     background-color: #1798fc;
  115. }
  117. footer .kf > a:last-of-type:hover {
  118.     background-color: #1589e2;
  119. }
  121. /* 客服标题样式 */
  122. footer .kf_box {
  123.     width: 360px;
  124.     height: 576px;
  125.     box-shadow: -2px -2px 0 0 #eeeeee;
  126.     position: fixed;
  127.     right: 0;
  128.     bottom: 0;
  129.     background-color: #fff;
  130.     z-index: 99;
  131. }
  133. /* 客服标题加一下背景 */
  134. footer .kf_box .title {
  135.     background-color: #1798fc;
  136.     height: 36px;
  137.     display: flex;
  138.     justify-content: space-between;
  139.     align-items: center;
  140. }
  141. /* 客服标题字体颜色 */
  142. footer .kf_box .title span {
  143.     color: #ffffff;
  144.     padding: 5px;
  145. }
  147. /* 客服界面主体布局 */
  148. footer .kf_main {
  149.     /* width: 900px; */
  150.     /* height: 676px; */
  151.     /* border: 1px solid; */
  152.     display: flex;
  153.     flex-direction: column;
  154. }
  155. /* 设置聊天界面高度 */
  156. footer .kf_main .msg {
  157.     height: 350px;
  158.     padding: 10px;
  159. }
  160. /* 设置输入框样式 */
  161. footer .kf_main .text_area {
  162.     border-top: 1px solid;
  163.     color: #3a3c4c;
  164.     height: 140px;
  165.     outline: none;
  166.     padding: 5px;
  167. }
  168. /* 设置发送按钮样式 */
  169. footer .kf_main button {
  170.     width: 50px;
  171.     height: 25px;
  172.     outline: none;
  173.     background-color: #1798fc;
  174.     color: #fff;
  175.     border-radius: 5px;
  176.     border: none;
  177.     place-self: end;
  178.     margin: 10px;
  179.     cursor: pointer;
  180. }
  181. /* 设置发送按钮鼠标悬停颜色 */
  182. footer .kf_main button:hover {
  183.     background-color: #5da9e4;
  184. }
  186. footer .kf_main .msg {
  187.     display: flex;
  188.     flex-direction: column;
  189. }
  191. /* 设置用户发的消息样式 */
  192. footer .kf_main .msg .right {
  193.     place-self: end;
  194.     background-color: #1798fc;
  195.     color: #fff;
  196.     padding: 5px;
  197.     margin: 5px 0px;
  198.     border-radius: 5px;
  199. }
  200. /* 设置客服回的消息样式 */
  201. footer .kf_main .msg .left {
  202.     place-self: start;
  203.     background-color: #e90e33;
  204.     color: #fff;
  205.     padding: 5px;
  206.     margin: 5px 0px;
  207.     border-radius: 5px;
  208. }

reset.css

  1. /* 页面元素样式初始化 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  8. /* 去掉a链接的文本装饰 */
  9. a {
  10.     text-decoration: none;
  11.     color: #555;
  12. }
  14. /* 去掉li标签的标记的点 */
  15. li {
  16.     list-style: none;
  17. }
  19. input,
  20. textarea {
  21.     outline-style: none;
  22. }
上一条：常用的函数类型和常用的数据类型下一条：访问器属性原理与应用场景,获取 dom 元素的两个重要方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多