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. }

更多相关文章

  1. android判断网络连接状态
  2. 设置android默认属性
  3. android 网络图片查看器
  4. Android(安卓)Activity设置全屏
  5. android：程序中安装APK方法
  6. Android(安卓)常见问题收集 (持续更新)
  7. Android(安卓)Animation动画详解
  8. android 为TextView的部分文字设置超链接样式并监听点击事件
  9. Android(安卓)Studio设置gradle代理

随机推荐

  1. Android Universal Image Loader 源码分
  2. Android中ListView的addFooterView不显示
  3. getprop 获取android系统属性
  4. Android安卓51个开源代码
  5. 安卓(Android)实现选择时间功能
  6. Android 权限汇总
  7. android 应用程序Activity之间数据传递与
  8. 点击LinearLayout使用selector改变TextVi
  9. Android Studio 第五十六期 - Android之
  10. ListActivity setContentView 错误