如何在 javascript 中 2 秒后自動刪除用戶輸入添加的段落？
[英]How can i remove the user input added paragraph automatically after 2 seconds in javascript?
問題描述
我剛剛學會了如何在 java 腳本中創建一個待辦事項列表，作為一個個人項目，我想通過創建一個告訴你的秘密網站來使用我在待辦事項應用程序制作中學到的信息，就像
const mytext = document.getElementById('mytext'); const btn = document.getElementById('btn'); const items = document.getElementById('items'); btn.addEventListener('click', function(e){ e.preventDefault(); const paragraph = document.createElement('p'); paragraph.classList.add("item"); paragraph.innerText = mytext.value; items.appendChild(paragraph); mytext.value = ''; });
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgb(231, 237, 241); } main { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10%; font-family: "Source Sans Pro", sans-serif; } h2 { color: rgb(71, 80, 102); font-size: 40px; margin-bottom: 30px; }.myform { display: flex; justify-content: center; align-items: center; } #btn { margin-left: 10px; width: 40px; height: 100px; white-space: pre-line; text-align: center; font-size: 15px; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; box-shadow: 2px 2px rgb(184, 182, 182); color: rgb(35, 70, 136); } #btn:active { color: rgb(48, 95, 182); box-shadow: 0 0 2px grey; } #mytext { background-color: aliceblue; border-radius: 10px; border: none; padding: 7px; box-shadow: 1px 1px rgb(200, 207, 212); outline: none; }.items { border-radius: 5px; font-family: cursive; color: rgb(61, 61, 60); width: 400px; display: flex; justify-content: center; margin-top: 10px; padding: 5px; }
<:DOCTYPE html> <html lang="en"> <head> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=MedievalSharp&display=swap" rel="stylesheet"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Source+Sans+Pro;wght@200;300;400;600;700.900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./styles,css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <main> <h2>Write Your Secret</h2> <div class="container"> <form class="myform" action=""> <textarea name="text" id="mytext" cols="30" rows="10" placeholder="Write Whatever You Wish"></textarea> <button id="btn">S ha r e</button> </form> <div class="items" id="items"></div> </div> </main> <script src="./app.js"></script> </body> </html>
待辦事項應用程序用戶在框中寫了一些東西（他/她的秘密）並且秘密顯示在屏幕上，但這就是我需要的：我需要在 2 秒后自動刪除顯示的段落，就像秘密在 2 秒后消失一樣你寫它。如果它像湯姆謎語日記中哈利波特電影中的墨水消失一樣緩慢消失，那就更好了，但這並不重要，我只想先在 2 秒后刪除秘密，然后擔心它消失的風格。
2 個解決方案
解決方案1
2 已采納 2021-04-29 12:06:18
只需添加此代碼：
setTimeout(() => paragraph.classList.add("hidden"), 2000)
它會在 2 秒后添加 class “隱藏”，它會做你想做的事。 您可以讓 class hidden做任何事情，例如將可見性設置為hidden ，但您也可以像您描述的那樣做過渡效果：
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
如果使用像上面這樣的轉換，您還可以添加此行以在轉換完成時刪除元素
paragraph.addEventListener('transitionend',() => paragraph.remove())
下面的實時示例
const mytext = document.getElementById('mytext'); const btn = document.getElementById('btn'); const items = document.getElementById('items'); btn.addEventListener('click', function(e){ e.preventDefault(); const paragraph = document.createElement('p'); paragraph.classList.add("item"); paragraph.innerText = mytext.value; items.appendChild(paragraph); mytext.value = ''; paragraph.addEventListener('transitionend',() => paragraph.remove()) setTimeout(() => paragraph.classList.add("hidden"), 2000) });
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgb(231, 237, 241); } main { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10%; font-family: "Source Sans Pro", sans-serif; } h2 { color: rgb(71, 80, 102); font-size: 40px; margin-bottom: 30px; }.myform { display: flex; justify-content: center; align-items: center; } #btn { margin-left: 10px; width: 40px; height: 100px; white-space: pre-line; text-align: center; font-size: 15px; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; box-shadow: 2px 2px rgb(184, 182, 182); color: rgb(35, 70, 136); } #btn:active { color: rgb(48, 95, 182); box-shadow: 0 0 2px grey; } #mytext { background-color: aliceblue; border-radius: 10px; border: none; padding: 7px; box-shadow: 1px 1px rgb(200, 207, 212); outline: none; }.items { border-radius: 5px; font-family: cursive; color: rgb(61, 61, 60); width: 400px; display: flex; justify-content: center; margin-top: 10px; padding: 5px; }.hidden { visibility: hidden; opacity: 0; transition: visibility 0s 2s, opacity 2s linear; }
<main> <h2>Write Your Secret</h2> <div class="container"> <form class="myform" action=""> <textarea name="text" id="mytext" cols="30" rows="10" placeholder="Write Whatever You Wish"></textarea> <button id="btn">S ha r e</button> </form> <div class="items" id="items"></div> </div> </main>
解決方案2
-2 2021-04-29 12:17:27
const btn = document.getElementById('btn');
const items = document.getElementById('items');
const clearInput = () => {
setInterval(function(){mytext.value = ''; }, 2000);
}
btn.addEventListener('click', function(e){
e.preventDefault();
const paragraph = document.createElement('p');
paragraph.classList.add("item");
paragraph.innerText = mytext.value;
items.appendChild(paragraph);
mytext.value = '';
});
clearInput()
通過vanilla javascript提交表單后，如何刪除用戶在輸入標簽中輸入的輸入？
[英]How do I remove the input typed in by user in an input tag after form submission through vanilla javascript?
如何獲取 javascript 在頁面加載后添加的表的行？
[英]How can I get the row of a table added after pageload by javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.