基于jQuery实现剪贴板复制进度动画效果的技术咨询

因为原生navigator.clipboard.writeText()没有提供进度回调，我们可以通过模拟进度动画+实际复制的方式实现需求，核心思路是用一个覆盖层逐步高亮文本区域，动画结束后完成剪贴板写入。

步骤1：调整HTML结构 #

给每个可复制文本添加相对定位的容器和进度高亮层：

<div class="copy-container">
  <div class="copyable">这里是需要复制的长文本内容，可替换为任意长度的文本...</div>
  <div class="copy-progress"></div>
</div>

步骤2：添加CSS样式 #

通过定位实现进度层的覆盖效果：

.copy-container {
  position: relative;
  display: block;
  margin: 8px 0;
}
.copyable {
  position: relative;
  z-index: 1;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.copy-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: rgba(46, 204, 113, 0.3);
  z-index: 0;
  transition: width 0.1s linear;
}

步骤3：jQuery实现逻辑 #

通过定时器逐步更新进度层宽度，模拟复制进度，最后执行实际复制：

$(".copyable").click(function() {
  const $el = $(this);
  const $container = $el.parent(".copy-container");
  const $progress = $container.find(".copy-progress");
  const text = $el.text();
  const totalChars = text.length;
  let processedChars = 0;

  // 重置全局状态
  $(".copy-progress").width(0);
  $(".copyable").css("background-color", "");

  // 启动进度动画
  const progressTimer = setInterval(() => {
    // 每次处理总长度的1/50，可调整步数控制动画快慢
    processedChars += Math.ceil(totalChars / 50);
    const progressRate = Math.min(processedChars / totalChars, 1);
    $progress.width(`${progressRate * 100}%`);

    // 进度完成后执行复制
    if (processedChars >= totalChars) {
      clearInterval(progressTimer);
      navigator.clipboard.writeText(text)
        .then(() => {
          $el.css("background-color", "#2ecc71");
          // 2秒后重置背景色
          setTimeout(() => $el.css("background-color", ""), 2000);
        })
        .catch(err => {
          console.error("复制失败:", err);
          $el.css("background-color", "#e74c3c");
        });
    }
  }, 50); // 每50ms更新一次进度，可调整间隔
});

关键说明 #

• 动画速度可通过两个参数调整：Math.ceil(totalChars / 50)中的50是总步数，数值越小动画越快；setInterval的50是每步间隔，数值越小动画越流畅。
• 进度层使用半透明绿色，既不遮挡文本又能清晰展示进度；复制完成后用实心绿色提示成功，失败则用红色。
• 注意：navigator.clipboard仅支持HTTPS环境或localhost，若需兼容HTTP环境，可添加降级方案（比如使用document.execCommand('copy')）。

内容的提问来源于stack exchange，提问作者user17445229