js通知组件

[openHacking]

纯js写一个通知组件，点击复制按钮，页面右上角弹出“复制成功”的提示。还有如下要求

1. “复制成功”的提示框从页面右侧区域往左弹出，1秒的动画
2. 2秒钟后“复制成功”的提示框往右消失

以下是一个使用纯JS实现的通知组件，包括复制按钮和弹出的提示框：

HTML：

<button id="copy-btn">复制</button>
<div id="notification"></div>

CSS：

#copy-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

#notification {
  position: fixed;
  top: 20px;
  right: -200px;
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border-radius: 5px;
  transition: all 1s ease-in-out;
}

JavaScript：

const copyBtn = document.getElementById("copy-btn");
const notification = document.getElementById("notification");

copyBtn.addEventListener("click", () => {
  // 获取需要复制的文本内容
  const textToCopy = "这是需要复制的文本内容";

  // 创建临时textarea元素
  const tempTextArea = document.createElement("textarea");
  tempTextArea.value = textToCopy;

  // 添加textarea到DOM中
  document.body.appendChild(tempTextArea);

  // 选中文本内容
  tempTextArea.select();
  tempTextArea.setSelectionRange(0, 99999); // for mobile devices

  // 执行复制命令
  document.execCommand("copy");

  // 移除临时textarea元素
  document.body.removeChild(tempTextArea);

  // 显示复制成功提示框
  notification.innerText = "复制成功";
  notification.style.right = "20px";
  
  // 2秒后隐藏提示框
  setTimeout(() => {
    notification.style.right = "-200px";
  }, 2000);
});

解释：

1. 首先获取需要复制的文本内容，这里假设是一个固定的字符串。

2. 当复制按钮被点击时，创建一个临时的textarea元素，并将需要复制的文本内容设置为textarea的值。

3. 将textarea添加到DOM中，并选中其中的文本内容。

4. 执行复制命令，将文本内容复制到剪贴板中。

5. 移除临时的textarea元素。

6. 显示复制成功提示框，将提示信息设置为“复制成功”，并将提示框的right属性设置为20px，这将会触发一个1秒的动画，使提示框从页面右侧区域往左弹出。

7. 2秒后，将提示框的right属性设置为-200px，使提示框往右消失。这将会触发一个1秒的动画，使提示框从当前位置往右移动，直到消失。