简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 留言板功能
Blogger Information
Blog 38
fans 0
comment 0
visits 18506
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
留言板功能
Blackeye
Original
579 people have browsed it

在线演示

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. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：这个很棒
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！