JS实现定时自动消失的弹出窗口

下面是“JS实现定时自动消失的弹出窗口”的完整攻略：

1. 弹出窗口基本结构

首先，我们需要先确定弹出窗口的基本结构和样式。以下是一个简单的弹出窗口结构和样式：

<div class="popup">
  <div class="popup-content">
    <h3>这是标题</h3>
    <p>这是内容</p>
  </div>
</div>

<style>
  .popup {
    width: 300px;
    height: 200px;
    background-color: #fff;
    border: 1px solid #ccc;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .popup-content {
    padding: 20px;
  }

  h3 {
    margin-top: 0;
  }
</style>

2. 使用JavaScript动态创建弹出窗口并添加定时器

接下来，我们需要使用JavaScript动态创建弹出窗口，并且添加定时器让弹出窗口在一定时间后自动消失。以下是示例代码：

// 创建弹出窗口
const popup = document.createElement('div');
popup.className = 'popup';
const popupContent = document.createElement('div');
popupContent.className = 'popup-content';
popup.appendChild(popupContent);
const title = document.createElement('h3');
title.textContent = '这是标题';
popupContent.appendChild(title);
const content = document.createElement('p');
content.textContent = '这是内容';
popupContent.appendChild(content);

// 将弹出窗口添加到页面中
document.body.appendChild(popup);

// 定义弹出框自动关闭的时间，单位为毫秒
const autoCloseTime = 3000;

// 定时器，控制弹出窗口自动关闭
setTimeout(() => {
  popup.remove();
}, autoCloseTime);

在上述示例代码中，首先我们使用document.createElement方法创建了一个弹出窗口（div.popup）和内部的内容（div.popup-content、h3和p）。然后使用appendChild方法将内容添加到弹出窗口中，并使用document.body.appendChild方法将弹出窗口添加到页面中。

接着，我们定义了一个定时器，以控制弹出窗口的自动关闭时间。setTimeout方法接受两个参数，第一个参数是回调函数，第二个参数是定时器的时间，这里我们使用autoCloseTime变量指定定时器的时间，单位为毫秒。回调函数内部使用remove方法将弹出窗口从页面中删除，从而实现弹出窗口的自动关闭。

3. 第二个示例：结合点击事件关闭弹出窗口

有时候，我们需要结合点击事件来手动关闭弹出窗口。以下是一个示例代码：

// 创建弹出窗口
const popup = document.createElement('div');
popup.className = 'popup';
const popupContent = document.createElement('div');
popupContent.className = 'popup-content';
popup.appendChild(popupContent);
const title = document.createElement('h3');
title.textContent = '这是标题';
popupContent.appendChild(title);
const content = document.createElement('p');
content.textContent = '这是内容';
popupContent.appendChild(content);

// 将弹出窗口添加到页面中
document.body.appendChild(popup);

// 定义弹出框自动关闭的时间，单位为毫秒
const autoCloseTime = 3000;

// 定时器，控制弹出窗口自动关闭
const timerId = setTimeout(() => {
  popup.remove();
}, autoCloseTime);

// 为弹出窗口添加点击事件，关闭弹出窗口
popup.addEventListener('click', () => {
  clearTimeout(timerId);
  popup.remove();
});

在上述示例代码中，我们在弹出窗口元素上使用addEventListener方法，为其添加了一个点击事件。当用户点击弹出窗口时，我们使用clearTimeout方法清除弹出窗口自动关闭的定时器，并使用remove方法将弹出窗口从页面中删除，从而实现手动关闭弹出窗口的功能。

这样，我们就实现了“JS实现定时自动消失的弹出窗口”的完整攻略。