时间戳

首页 > 解决方案 > 如何在javascript中2秒后自动删除用户输入添加的段落？

javascript - 如何在javascript中2秒后自动删除用户输入添加的段落？

问题描述

我刚刚学会了如何在 java 脚本中创建一个待办事项列表，作为一个个人项目，我想通过创建一个告诉你的秘密网站来使用我在 to-do 应用程序制作中学到的信息，就像

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
        h
        a
        r
        e</button>
    </form>
    <div class="items" id="items"></div>
  </div>
  
</main>

  <script src="./app.js"></script>
</body>
</html>

待办事项应用程序用户在框中写了一些东西（他/她的秘密）并且秘密显示在屏幕上，但这就是我需要的：我需要在 2 秒后自动删除显示的段落，就像秘密在 2 秒后消失一样你写它。如果它像汤姆谜语日记中哈利波特电影中的墨水消失一样缓慢消失，那就更好了，但这并不重要，我只想先在 2 秒后删除秘密，然后担心它消失的风格。

标签： javascripthtmlcss

解决方案

只需添加此代码：

setTimeout(() => paragraph.classList.add("hidden"), 2000)

它会在 2 秒后添加“隐藏”类，它会做你想做的事。你可以让类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
        h
        a
        r
        e</button>
    </form>
    <div class="items" id="items"></div>
  </div>
  
</main>

推荐阅读