留言板

效果图

代码

  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.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       body .lyb .srk input {
  15.         padding: 30px;
  16.         height: 50px;
  17.         width: 200px;
  18.         border-radius: 5px;
  19.         outline: none;
  20.       }
  22.       .lyb {
  23.         width: 50%;
  24.         height: 100%;
  25.         background-color: cadetblue;
  26.       }
  27.       .srk {
  28.         display: grid;
  29.         place-content: center;
  30.         height: 100px;
  31.       }
  32.       ul {
  33.         position: relative;
  34.       }
  36.       li {
  37.         list-style: none;
  38.       }
  40.       button {
  41.         font-size: 15px;
  42.         line-height: 15px;
  43.         text-align: center;
  44.         border-radius: 50%;
  45.         background-color: mediumvioletred;
  46.         position: absolute;
  47.         right: 0;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div class="lyb">
  53.       <div class="srk">
  54.         <input
  55.           type="text"
  56.           onkeydown="addMsg(this)"
  57.           placeholder="请输入类容"
  58.           autofocus
  59.         />
  60.       </div>
  61.       <ul class="list"></ul>
  62.     </div>
  64.     <script>
  65.       function addMsg(ele) {
  66.         if (event.key === 'Enter') {
  67.           // 获取留言板类容
  68.           const ul = document.querySelector('.list');
  70.           //判断用户留言是否为空
  72.           if (ele.value.trim().length === 0) {
  73.             alert('留言不能为空');
  74.             ele.focus();
  75.             return false;
  76.           }
  78.           //添加一条留言
  79.           const li = document.createElement('li');
  80.           li.innerHTML =
  81.             ele.value + '<button onclick="del(this.parentNode)">删除</button>';
  83.           ul.insertAdjacentElement('afterBegin', li);
  85.           //将输入框中的前一条留言清空
  86.           ele.value = null;
  87.           //焦点重置
  88.           ele.focus();
  89.         }
  90.       }
  92.       //删除
  93.       function del(ele) {
  94.         return confirm('是否删除' ? ele.remove() : false);
  95.       }
  96.     </script>
  97.   </body>
  98. </html>

更多相关文章

  1. 留言表单实战
  2. 留言板学习
  3. 留言板功能css美化
  4. 留言板实战
  5. 简单留言板练习
  6. javascript-基础（四）实战
  7. Dom实战：留言板
  8. 留言板及自动客服回复功能的实例演示
  9. 留言板实践代码

随机推荐

  1. android中textview控件中的文字的位置是
  2. 从零开始学android开发- layout属性介绍
  3. 设置图片重复
  4. win10 编译 Android ffmpeg
  5. android cts 认证测试
  6. Android开机自启动设置
  7. Android上层启动过程的几个关键点
  8. 生成android自签名证书流程
  9. Android(安卓)Log 日志系统
  10. Android HttpURLConnection应用技巧分享