search

博客列表 >留言板功能

留言板功能

Blackeye
Blackeye原创
2022年04月04日 01:11:01592浏览

在线演示

demo

  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="hw.css" />
  9.     <link rel="stylesheet" href="static/css/iconfont.css" />
  10.   </head>
  11.   <body>
  12.     <!-- 演示区域 -->
  13.     <div class="showArea">
  14.       <!-- 在线客服头部 -->
  15.       <div class="title">
  16.         <button onclick="back()" title="返回">&lt;</button>
  17.         <span>在线客服</span>
  18.       </div>
  19.       <div class="displayArea">
  20.         <!-- 1.留言板图标 -->
  21.         <!-- 2.图标选中颜色变化 -->
  22.         <div class="msgIcon iconfont icon-kefu" onclick="showMsg()"></div>
  23.         <!-- 3.设置留言板样式 -->
  24.         <div class="msgDisplay">
  25.           <!-- 展示客户问题 -->
  26.           <div class="msgShow">
  27.             <ul class="msgShowList">
  29.             </ul>
  30.           </div>
  31.           <!-- 客户输入文本框 -->
  32.           <div class="msgInput">
  33.             <textarea
  34.               name="inputData"
  35.               id="inputData"
  36.               onkeydown="submitMsg(this)"
  37.               placeholder="请输入，按Enter直接发送消息"
  38.               autofocus
  39.             ></textarea>
  40.           </div>
  41.         </div>
  42.       </div>
  43.     </div>
  45.     <script>
  46.       function showMsg() {
  47.         const msgIcon = document.querySelector(".msgIcon");
  48.         const title = document.querySelector(".title");
  49.         const msgDisplay = document.querySelector(".msgDisplay");
  50.         msgIcon.style.display = "none";
  51.         title.style.display = "block";
  52.         msgDisplay.style.display = "grid";
  53.       }
  54.       function back() {
  55.         const msgIcon = document.querySelector(".msgIcon");
  56.         const title = document.querySelector(".title");
  57.         const msgDisplay = document.querySelector(".msgDisplay");
  58.         title.style.display = "none";
  59.         msgDisplay.style.display = "none";
  60.         msgIcon.style.display = "block";
  61.       }
  62.       // 1. 独立完成留言板功能,要求使用CSS进行页面美化
  63.       // 2. (选做)将留言板功能升级为自动客服回复(定时器实现)
  64.       function submitMsg(ele) {
  65.         if (event.key === "Enter") {
  66.           //   判断是否输入为空
  67.           if (ele.value.trim() !== "") {
  68.             const ul = document.querySelector(".msgShowList");
  69.             const li = document.createElement("li");
  70.             li.innerHTML =
  71.               `<p>
  72.                     <img src="static/img/userProfilePicture.jpeg">` +
  73.               `<span>${ele.value.trim()}</span>
  74.                     </p>`;
  75.             ul.insertAdjacentElement("beforeEnd", li);
  76.             webpageMsg(ele.value.trim());
  77.           } else {
  78.             alert("输入有误，请重新输入！");
  79.           }
  80.           event.preventDefault();
  81.           ele.value = "";
  82.           ele.focus();
  83.         }
  84.       }
  85.       function webpageMsg(lo) {
  86.         const ul = document.querySelector(".msgShowList");
  87.         const li = document.createElement("li");
  88.         li.innerHTML = `<span>对方正在输入</span>`;
  89.         ul.insertAdjacentElement("beforeEnd", li);
  90.         setTimeout(function () {
  91.             if(lo==="天王盖地虎"){
  92.                 li.innerHTML = `<p>
  93.                     <img src="static/img/webProfilePicture.jpg">` +
  94.               `<span>小鸡炖蘑菇</span>
  95.                     </p>`;
  96.                 li.className="userRight";
  97.                 ul.replaceChild(li,ul.lastChild);
  98.             }else if(lo==="12345"){
  99.                 li.innerHTML = `<p>
  100.                     <img src="static/img/webProfilePicture.jpg">` +
  101.               `<span>上山打老虎</span>
  102.                     </p>`;
  103.                 li.className="userRight";
  104.                 ul.replaceChild(li,ul.lastChild);
  105.             }
  106.             else{
  107.                 li.innerHTML = `<p>
  108.                     <img src="static/img/webProfilePicture.jpg">` +
  109.               `<span>口令不对再想想</span>
  110.                     </p>`;
  111.                 li.className="userRight";
  112.                 ul.replaceChild(li,ul.lastChild);
  113.             }
  114.         }, 1000);
  115.       }
  116.     </script>
  117.   </body>
  118. </html>
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. a{
  7.     text-align: none;
  8.     color:black;
  9. }
  11. ul{
  12.     list-style-type: none;
  13. }
  15. body{
  16.     background-color: azure;
  17. }
  19. .showArea{
  20.     width: 601px;
  21.     height: 600px;
  22.     margin: auto;
  23.     display: grid;
  24.     grid-template-rows: 40px 1fr;
  25.     border-radius: 10px;
  26.     background-color: rgb(15, 127, 219);
  27. }
  29. .showArea .title{
  30.     width: 601px;
  31.     text-align: center;
  32.     background-color: rgba(175, 33, 226, 0.661);
  33.     padding: 3px;
  34.     border-radius: 10px 10px 0 0;
  35.     display: none;
  36. }
  38. .showArea .title button{
  39.     border-radius: 5px;
  40.     outline: none;
  41.     border: none;
  42.     background-color: white;
  43.     color: #BBB;
  44.     margin-right: 10px;
  45.     padding: 5px;
  46. }
  48. .showArea .title button:hover{
  49.     cursor: pointer;
  50.     background-color: coral;
  51.     color: white;
  52. }
  55. .showArea .title>span{
  56.     letter-spacing: 5px;
  57.     font-size: 25px;
  58.     color:white;
  59. }
  61. .displayArea{
  62.     position: relative;
  63. }
  65. .displayArea .msgIcon{
  66.     width: 70px;
  67.     height: 70px;
  68.     background-color: white;
  69.     border-radius: 50%;
  70.     font-size: 65px;
  71.     text-align: center;
  72.     color: #e1e1e1;
  73.     position: absolute;
  74.     margin-top: 300px;
  75.     right: 0;
  76.     margin-right: 10px;
  77.     /* 测试先关闭 */
  78.     /* display: none; */
  79. }
  81. .displayArea .msgIcon:hover{
  82.     cursor: pointer;
  83.     color:coral;
  84. }
  86. .msgDisplay{
  87.     border: 0.5px solid black;
  88.     border-radius: 0 0 10px 10px;
  89.     display: grid;
  90.     grid-template-rows: 400px 1fr;
  91.     display: none;
  92. }
  94. .msgDisplay .msgShow{
  95.     background-color: #fefefe;
  96. }
  98. .msgDisplay .msgInput textarea{
  99.     padding: 10px;
  100.     outline: none;
  101.     border: none;
  102.     border-top: 1px solid #eee;
  103.     border-radius: 0 0 10px 10px;
  104.     resize: none;
  105.     width: 600px;
  106.     height: 160px;
  107. }
  109. .msgDisplay .msgShow{
  110.     padding: 10px;
  111.     overflow: auto;
  112. }
  113. .msgDisplay .msgShow img{
  114.     width: 50px;
  115.     height: 50px;
  116.     vertical-align:middle;
  117.     border-radius: 10px;
  118. }
  120. .msgDisplay .msgShow ul li{
  121.     margin-top: 5px;
  122. }
  124. .msgDisplay .msgShow ul p{
  125.     width: 300px;
  126.     background-color: #eee;
  127.     border-radius: 10px;
  128. }
  130. .msgDisplay .msgShow ul li>span{
  131.     display: flex;
  132.     place-content: center;
  133. }
  135. .msgDisplay .msgShow .userRight{
  136.     display: flex;
  137.     place-content: flex-end;
  138. }
上一条：仿PHP中文网右侧部分下一条：常用的函数类型和常用的数据类型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多