隐藏 Toast 消息

本课属于 Coddy HTML 学习旅程的“JavaScript 实战”单元。第 12 课，共 27 课。

挑战

简单

3 秒后隐藏 Toast。

我们不希望 Toast 消息一直显示，所以在短暂延迟后将它隐藏：

使用 setTimeout() 创建 3 秒的延迟。
在超时函数中，为 Toast 元素添加 "hidden" 类。
同时，从 Toast 元素中移除 "show" 类，让它平滑消失。

亲手试试

<!DOCTYPE html>
<html>
<head>
  <title>Form with Toast</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h2>Subscribe to our Newsletter</h2>
    <form id="myForm">
      <input type="text" id="name" placeholder="Enter your name">
      <button type="submit">Submit</button>
    </form>
  </div>

  <!-- 提示弹窗 -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

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