当我点击停止按钮时，我想显示一个五彩纸屑。如何在单击停止按钮时在整个页面上显示五彩纸屑

<button id="stopButton">停止</button>
<div id="confettiContainer"></div>

#confettiContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

document.getElementById("stopButton").addEventListener("click", function() {
  var confettiContainer = document.getElementById("confettiContainer");
  var colors = ["red", "blue", "green", "yellow", "purple"]; // 五彩纸屑的颜色

  // 创建五彩纸屑元素并设置样式
  var confetti = document.createElement("div");
  confetti.style.width = "10px";
  confetti.style.height = "10px";
  confetti.style.borderRadius = "50%";
  confetti.style.position = "absolute";
  confetti.style.top = "50%";
  confetti.style.left = "50%";
  confetti.style.transform = "translate(-50%, -50%)";

  // 随机选择一种颜色
  var randomColor = colors[Math.floor(Math.random() * colors.length)];
  confetti.style.backgroundColor = randomColor;

  // 添加五彩纸屑元素到容器中
  confettiContainer.appendChild(confetti);

  // 动画效果：随机位置和旋转
  var angle = 0;
  var rotate = function() {
    angle += 4; // 旋转速度
    confetti.style.transform = "translate(-50%, -50%) rotate(" + angle + "deg)";

    // 递归调用产生旋转动画效果
    requestAnimationFrame(rotate);
  };

  // 启动旋转动画
  rotate();

  // 一段时间后删除五彩纸屑元素，可以调整这个时间来控制五彩纸屑的持续时间
  setTimeout(function() {
    confettiContainer.removeChild(confetti);
  }, 3000); // 持续时间为3秒
});