重新整理JavaScript笔记

2026-02-03 10:33:35 +08:00 · 2024-01-13 17:25:31 +08:00
parent 96a49a36de
commit 52d96d354e
109 changed files with 745 additions and 1752 deletions
--- a/JavaScript/Code/index.html
+++ b/JavaScript/Code/index.html
@@ -0,0 +1,25 @@
+<html>
+
+<head>
+
+</head>
+
+<body>
+    <div class="msg"></div>
+    <form id="my-form">
+        <div>
+            <label for="name">Name:</label>
+            <input type="text" id="name">
+        </div>
+        <div>
+            <label for="email">Email:</label>
+            <input type="text" id="email">
+        </div>
+        <ul id="users"></ul>
+        <input class="button" type="submit" value="Submit">
+    </form>
+    <script src="index.js"></script>
+
+</body>
+
+</html>
--- a/JavaScript/Code/index.js
+++ b/JavaScript/Code/index.js
@@ -0,0 +1,31 @@
+const my_form = document.querySelector('#my-form')
+const name_input = document.querySelector('#name')
+const email_input = document.querySelector('#email')
+const msg = document.querySelector('.msg')
+const user_list = document.querySelector('#users')
+
+my_form.addEventListener('submit',onsubmit);
+
+function onsubmit(e){
+    e.preventDefault();
+    if(name_input.value ==='' || email_input.value===''){
+        msg.classList.add('error')
+        msg.innerHTML='Please Enter all fields';
+        setTimeout(()=>{
+            msg.remove()
+        },3000) 
+        // setTimeout本质上是一个异步的方法，不会阻塞当前线程，而是开启一个线程，执行相关的访问，非常有用
+        // 可以用来检测任务执行的状态，动态修改当前任务执行的内容。
+    }
+    else{
+        // console.log('success')
+        const li  = document.createElement('li')
+        li.appendChild(document.createTextNode(`${name_input.value}:${email_input.value}`));
+        user_list.appendChild(li);
+        name_input.value=''
+        email_input.value=''
+    }
+
+    
+
+}