使用 setTimeout 或 setInterval 传递 Message 项目问题

Question

我正在让初学者 javascript 传递消息项目我遇到了一个问题：如果没有提交输入，则应在“发送的最后一条消息”中显示警报（使用 CSS 文件中的“显示”类） ” 部分，然后在 2 秒 后消失。我不知道 setTimeout 和 setInterval 方法真的很好以及如何打破它们，但如果有人可以提供帮助。

const adder = document.getElementById('message-form')
const cont = document.querySelector('.boxer')
const feeder = document.querySelector('.feedback')
let counter = 0;


adder.addEventListener('submit', e => {
  e.preventDefault();
  let texto = adder.oop.value
  if (texto.length) {

    html = `
    <div class="boxerr">
    <h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">please enter a value to pass</h5>
    <h4 class="text-capitalize my-3">last message delivered</h4>
    <h4 class="message-content text-uppercase">${texto}</h4>
  </div>
    `
    cont.innerHTML += html
    adder.reset()
  } else {

    let timer = setTimeout(() => {
      counter++
      feeder.classList.toggle('show')
      if (counter === 2) {
        clearTimeout(timer)
      }
    }, 100);
  }
});

:root {
  --lightBlue: #95b8d1;
  --mainwhite: #f5f5f5;
  --mainBlack: #333333;
}

.max-height {
  min-height: 100vh;
}

body {
  background: var(--lightBlue);
}

.message-container {
  background: var(--mainwhite);
}

.message-content {
  color: var(--lightBlue);
}

#submitBtn {
  background: var(--lightBlue);
  color: var(--mainwhite);
}

#submitBtn:hover {
  color: var(--lightBlue);
  color: var(--mainBlack);
}

.feedback {
  display: none;
}

.show {
  display: block;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="row max-height align-items-center">
    <div class="col-10 mx-auto col-md-8 message-container text-center p-3">
      <h4 class="text-capitalize">A messge you would like to pass</h4>
      <form id="message-form">
        <input type="text" name="oop" id="message" class="w-100 my-3 p-2">
        <input type="submit" id="submitBtn" class="btn btn-lg">
      </form>
      <div class="boxer">
        <div class="boxerr">
          <h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">please enter a value to pass</h5>
          <h4 class="text-capitalize my-3">last message delivered</h4>
          <h4 class="message-content text-uppercase">hello world</h4>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以在else 块中执行类似的操作：

feeder.classList.add("show");
setTimeout(() => feeder.classList.remove("show"), 2000);

此代码会将show 类添加到.feedback 元素，并在2000 毫秒后（即2 秒为1000ms = 1s） show 类将从.feedback 元素。

---

完整代码：

const adder = document.getElementById('message-form')
const cont = document.querySelector('.boxer')
const feeder = document.querySelector('.feedback')
let counter = 0;


adder.addEventListener('submit', e => {
  e.preventDefault();
  let texto = adder.oop.value
  if (texto.length) {

    html = `
    <div class="boxerr">
    <h4 class="text-capitalize my-3">last message delivered</h4>
    <h4 class="message-content text-uppercase">${texto}</h4>
  </div>
    `
    cont.innerHTML += html
    adder.reset()
  } else {
    feeder.classList.add("show");
    setTimeout(() => feeder.classList.remove("show"), 2000);
  }
});

:root {
  --lightBlue: #95b8d1;
  --mainwhite: #f5f5f5;
  --mainBlack: #333333;
}

.max-height {
  min-height: 100vh;
}

body {
  background: var(--lightBlue);
}

.message-container {
  background: var(--mainwhite);
}

.message-content {
  color: var(--lightBlue);
}

#submitBtn {
  background: var(--lightBlue);
  color: var(--mainwhite);
}

#submitBtn:hover {
  color: var(--lightBlue);
  color: var(--mainBlack);
}

.feedback {
  display: none;
}

.show {
  display: block;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="row max-height align-items-center">
    <div class="col-10 mx-auto col-md-8 message-container text-center p-3">
      <h4 class="text-capitalize">A messge you would like to pass</h4>
      <form id="message-form">
        <input type="text" name="oop" id="message" class="w-100 my-3 p-2">
        <input type="submit" id="submitBtn" class="btn btn-lg">
      </form>
      <h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">please enter a value to pass</h5>
      <div class="boxer">
        <div class="boxerr">
          <h4 class="text-capitalize my-3">last message delivered</h4>
          <h4 class="message-content text-uppercase">hello world</h4>
        </div>
      </div>
    </div>
  </div>
</div>