简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 模拟留言板
Blogger Information
Blog 28
fans 0
comment 1
visits 13114
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
模拟留言板
centos
Original
376 people have browsed it

留言板

获取form表单内容

  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.       .login {
  10.         width: auto;
  11.         height: 150px;
  12.         border: 1px dashed red;
  13.         background-color: rgb(132, 193, 193);
  14.       }
  15.       form input {
  16.         -webkit-appearance: none;
  17.         -moz-appearance: none;
  18.         appearance: none;
  19.         outline: 0;
  20.         border: 1px solid rgba(219, 195, 12, 0.4);
  21.         background-color: rgba(255, 255, 255, 0.2);
  22.         width: 250px;
  23.         border-radius: 3px;
  24.         padding: 10px 15px;
  25.         margin: 0 auto 10px auto;
  26.         /* display: block; */
  27.         text-align: center;
  28.         font-size: 18px;
  29.         color: rgb(17, 93, 233);
  30.         transition-duration: 0.25s;
  31.         font-weight: 300;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <form action="login.php" method="post" id="login">
  37.       <fieldset class="login" align="center">
  38.         <legend>请登录</legend>
  39.         <label for="email">邮箱：</label>
  40.         <input
  41.           type="email"
  42.           name="email"
  43.           id="email"
  44.           value="admin@php.cn"
  45.           autofocus
  46.         />
  47.         <br />
  48.         <label for="password">密码：</label>
  49.         <input type="password" name="password" id="password" value="123456" />
  50.         <br />
  51.         <button>提交</button>
  52.       </fieldset>
  53.     </form>
  54.     <script>
  55.       //获取form元素  第一种方法用querySelector
  56.       //   const form = document.querySelector("#login");
  57.       //   //   console.log(form);
  58.       //   let email1 = form.querySelector("#email");
  59.       //   console.log(email.value);
  60.       //   //获取form元素  第二种方法用forms
  61.       //   const form1 = document.forms;
  62.       //   console.log(form1[0][1]);
  63.       //   console.log(form1.login.email.value);
  64.       //   对于forms来说, 索引与id同义;
  65.       //   可以直接使用input的name属性来匹配表单控件元素;
  66.       //   控件可以用name来引用, 如果没有name, 就用id;
  67.       let email = document.forms.login.email.value;
  68.       let password = document.forms.login.password.value;
  69.       let user = {
  70.         email,
  71.         password,
  72.       };
  73.       console.log(JSON.stringify(user, null, 2));
  74.     </script>
  75.   </body>
  76. </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>遍历dom树</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li class="item">item1</li>
  12.       <li class="item">item2</li>
  13.       <li class="item">item3</li>
  14.       <li class="item">item4</li>
  15.       <li class="item">item5</li>
  16.     </ul>
  17.     <script>
  18.       //子元素用children
  19.       let list = document.querySelector(".list");
  20.       console.log(list.children);
  21.       //类数组转换成这数组
  22.       //1.用Array.from()
  23.       console.log(Array.isArray(Array.from(list.children)));
  24.       // 2.用...rest
  25.       console.log(Array.isArray([...list.children]));
  26.       //遍历
  27.       //1 传统方式获取第一个元素
  28.       document.querySelector(".list>.item:first-of-type").style.color = "white";
  29.       //或者
  30.       list.children[0].style.background = "coral";
  31.       //2用特定语法
  32.       // 获取第一个元素用firstElementChild
  33.       list.firstElementChild.style.background = "blue";
  34.       // 获取最后一个元素用lastElementChild
  35.       list.lastElementChild.style.background = "coral";
  36.       // 获取第一个元素的下一个兄弟元素用nextElementSibling
  37.       list.firstElementChild.nextElementSibling.style.background = "green";
  38.       // 获取一个元素的上一个兄弟元素用previousElementSibling
  39.       list.lastElementChild.previousElementSibling.style.background = "red";
  40.       //获取父节点
  41.       list.firstElementChild.parentNode.style.border = "2px solid";
  42.     </script>
  43.   </body>
  44. </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.   </head>
  9.   <body>
  10.     <input
  11.       type="text"
  12.       onkeydown="addMsg(this)"
  13.       placeholder="请输入留言"
  14.       autofocus
  15.     />
  16.     <ul class="list"></ul>
  17.     <script>
  18.       function addMsg(e) {
  19.         //1获取输入框容器
  20.         if (event.key === "Enter") {
  21.           //   console.log(e);
  22.           const ul = document.querySelector(".list");
  24.           // 2判断输入内容是否为空，
  25.           if (e.value.trim().length === 0) {
  26.             alert("留言不能为空");
  27.             e.focus();
  28.             return false;
  29.           }
  30.           const li = document.createElement("li");
  31.           //3不为空则添加到ul里，且添加一个删除按钮
  32.           li.innerHTML =
  33.             e.value + "<button onclick='del(this.parentNode)'>删除</button>";
  34.           if (ul.firstElementChild !== null) {
  35.             ul.firstElementChild.before(li);
  36.           } else {
  37.             ul.append(li);
  38.           }
  40.           //   4.将输入框清空
  41.           e.value = null;
  42.           // 5，输入框焦点重置
  43.           e.focus();
  44.         }
  45.       }
  46.       function del(e) {
  47.         return confirm("是否删除") ? e.remove() : false;
  48.       }
  49.     </script>
  50.   </body>
  51. </html>
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！