search

博客列表 >JS留言板实践

JS留言板实践

P粉317509817
P粉317509817原创
2022年04月04日 16:50:14475浏览

JS实现留言板功能

  • 功能1：可以实现留言的显示

  • 功能2：可以实现用户输入‘你好’、‘你吃了吗’这两句话，后台会自动回复

  • 功能3：双击留言可以实现删除留言共呢个

  • 功能4：实现enter键和‘Submit’键经行留言提交

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="留言板.css">
  9.     <script src="留言板.js"></script>
  10. </head>
  11. <body>
  12.     <div class="containt">
  13.         <ul class="list"></ul>
  14.         <div class="shurukaung">
  15.             <input type="text" class="search" onkeydown="addMsg(this)" placeholder="请输入内容" autofocus />
  16.             <button class="submit" onclick="submit()">Submit</button>
  17.         </div>
  18.     </div>
  19. </body>
  20. </html>

CSS代码

  1. * {
  2.     /* 页面初始化 */
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. /* a标签初始化 */
  9. a {
  10.     text-decoration: none;
  11.     /* 去掉下划线 */
  12.     color: #555;
  13. }
  15. body {
  16.     background-color: rgb(243,245,247);
  17. }
  19. li {
  20.     list-style:circle;
  21.     /* 去掉无序列表前的小圆点 */
  22. }
  23. .containt {
  24.     /* background-color: red; */
  25.     width: 1000px;
  26.     height:900px;   
  27.     margin: auto;
  28.     display: grid;
  29.     grid-template-rows:800px 100px;
  30.     gap:40px;
  31.     margin-top: 80px;
  33. }
  34. .shurukaung {
  35.     width: 1000px;
  36.     height:900px;
  37.     margin: auto;
  38.     display: grid;
  39.     grid-template-columns: 800px 170px;
  40.     gap: 10px   ;
  41.     place-content: space-between;
  42.     /* background-color: red; */
  43.     /* position:fixed; */
  44.     /* margin-top:1000px; */
  45.     /* position: relative;
  46.     top:800px */
  48. }
  49. .shurukaung input {
  50.     width: 800px;
  51.     height: 50px;
  52.     font-size: large;
  53.     border-radius: 10px;
  54.     border: 3px solid black;
  55.     position: relative;
  56. }
  57. .shurukaung .submit {
  58.     border-radius: 10px;
  59.     background-color: #D0e1ca;
  60.     font-size:x-large;
  61.     font-weight:bolder;
  62.     color:white;
  65. }
  66. input:focus{
  67.     border-color: #66afe9;
  68.     outline: 0;
  69.     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  70.     box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
  71. }
  72. .shurukaung button:focus{
  73.     border-color:#66afe9 ;
  74.     outline: 0;
  75.     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  76.     box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
  77. }
  78. /* .containt {
  79.     background-color:red;
  80.     height: 100px;
  81. } */
  82. .containt .list .item1,
  83. .containt .list .item {
  84.     /* color:#00c5bd; */
  85.     font-size:25px;
  86.     font-weight: bold;
  87.     display: grid;
  88.     /* grid-auto-rows: 40px 100px; */
  89. }
  90. .containt .list .userName{
  91.     width: 300px;
  92.     background-color: #D0e1ca;
  93.     color: black;
  94.     font-size: smaller;
  95.     border-radius: 10px 10px 0 0;
  96.     padding: 5px;
  97.     overflow: hidden;
  98.     text-overflow: ellipsis;
  99.     white-space: nowrap;
  100. }
  101. .containt .list .context {
  102.     width: 300px;
  103.     background-color: #d0d0d0;
  104.     margin-bottom: 20px;
  105.     border-radius: 0 0 10px 10px;
  106.     padding-left: 10px;
  108. }
  109. .containt .list {
  110.     overflow: auto ;
  111. }
  112. .containt .list .context1 {
  113.     width: 300px;
  114.     background-color: #d0d0d0;
  115.     margin-bottom: 20px;
  116.     border-radius: 0 0 10px 10px;
  117.     padding-left: 10px;
  118. }
  119. .containt .list .item1 {
  120.     place-content: end;
  121. }

js代码

  1. let i = 0;
  2. function addMsg(ele){
  3.     if (event.key === 'Enter'){
  4.         // console.log(ele);
  5.         // 获取元素
  6.         const ul = document.querySelector('.list');
  7.         // 判断是否为空
  8.         // 方法trim为去掉空格
  9.         if (ele.value.trim().length === 0){
  10.             alert('留言不能为空');
  11.             ele.focus();
  12.             return false;
  13.         }
  14.         else if (ele.value.trim().length >= 20){
  15.             alert('不能超过20个字符');
  16.             return false;
  17.         }
  18.         // 添加新留言
  19.         const li = document.createElement('li');
  20.         // li.style.color='red';
  21.         li.innerHTML = `<div class="userName">用户${++i}:&nbsp; &nbsp;&nbsp;${ele.value}</div>
  22.         <div class="context">${ele.value}</div>`;
  23.         li.className = 'item';
  24.         li.ondblclick = function(){
  25.             return confirm('是否删除') ? li.parentNode.removeChild(li) : false;
  26.         };
  27.         // 将输入值转为html文字值
  28.         ul.insertAdjacentElement('afterBegin',li);
  29.         ele.value = null;
  30.         ele.focus();
  31.         // return ele;
  32.         time();
  33.     }
  34. }
  35. function submit(){
  36.     const ul = document.querySelector('.list');
  37.     const text = document.querySelector('.search');
  38.     // console.log(typeof(text.value));
  39.     if (text.value.trim().length === 0){
  40.         alert('留言不能为空');
  41.         text.focus();
  42.         return false;
  43.     }
  44.     else if (text.value.trim().length >= 10){   
  45.         alert('不能超过三十个字符');
  46.         return false;
  47.     }
  48.     const li = document.createElement('li');
  49.     // // li.style.color='red';
  50.     li.innerHTML = `<div class="userName">用户${++i}:&nbsp; &nbsp;&nbsp;${text.value}</div>
  51.     <div class="context">${text.value}</div>`;
  52.     li.className = 'item';
  53.     li.ondblclick = function(){
  54.         return confirm('是否删除') ? li.parentNode.removeChild(li) : false;
  55.     };
  56.     // // 将输入值转为html文字值
  57.     ul.insertAdjacentElement('afterBegin',li);
  58.     text.value = null;
  59.     text.focus();
  60. }
  61. function time(){
  62.     let x = true;
  63.     if (x){
  64.         setTimeout(function(){
  66.             const ul = document.querySelector('.list');
  68.             let ele1 = document.querySelector('.context').innerHTML;
  70.             if (ele1.trim()==='你好'){
  71.                 const li = document.createElement('li');
  72.                 li.innerHTML=`<div class="userName">客服：</div>
  73.                 <div class="context1">你好</div>`;
  74.                 li.className = 'item1';
  75.                 ul.insertAdjacentElement('afterBegin',li);
  76.             }
  77.             else if (ele1.trim()==='你吃了吗'){
  78.                 const li = document.createElement('li');
  79.                 li.innerHTML=`<div class="userName">客服：</div>
  80.                 <div class="context1">我没吃</div>`;
  81.                 li.className = 'item1';
  82.                 ul.insertAdjacentElement('afterBegin',li);
  83.             }
  84.             return x=false;
  85.         },1000)
  86.     }
  88. }

效果演示：

上一条：常用函数类型和数据类型下一条：nodejs结合Socket.IO实现websocket即时通讯
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议