/** * 创建一个文字水印的div * @param {string} text - 水印文字 * @param {string} color - 水印颜色 * @param {number} deg - 水印旋转角度 * @param {number} opacity - 水印透明度 * @param {number} count - 水印数量 */function createWatermark(text, color, deg, opacity, count) { // 创建水印容器 const container = document.createElement("div"); container.className = "watermark"; // TODO: 根据输入参数创建文字水印 // 获取水印的宽度 const containerWidth = container.clientWidth; // 计算间距 const offset = 140; // 计算总宽度 const totalWidth = count * offset; for (let i = 0; i < count; i++) { // 创建水印元素 const watermark = document.createElement("div"); watermark.textContent = text; watermark.style.color = color; watermark.style.transform = `rotate(${deg}deg)`; watermark.style.opacity = opacity; watermark.style.pointerEvents = 'none'; watermark.style.position = "absolute"; watermark.style.userSelect = "none"; watermark.style.top = "250px"; watermark.style.left = `${(containerWidth - totalWidth) / 2 + i * offset}px`; // 添加水印到容器中 container.appendChild(watermark); } // 返回水印容器 return container;} 解释每个代码的作用

这段代码是用来创建一个带有文字水印的div元素，并返回该元素。下面是具体的代码解释：

function createWatermark(text, color, deg, opacity, count) {
  // 创建水印容器
  const container = document.createElement("div");
  container.className = "watermark";

该函数接受5个参数：text（水印文字）、color（水印颜色）、deg（水印旋转角度）、opacity（水印透明度）和count（水印数量）。首先创建一个div元素作为水印容器，并设置其class为“watermark”。

  // 获取水印的宽度
  const containerWidth = container.clientWidth;
  // 计算间距
  const offset = 140;
  // 计算总宽度
  const totalWidth = count * offset;

获取水印容器的宽度，并计算每个水印之间的间距和所有水印所占的总宽度。

  for (let i = 0; i < count; i++) {
    // 创建水印元素
    const watermark = document.createElement("div");
    watermark.textContent = text;
    watermark.style.color = color;
    watermark.style.transform = `rotate(${deg}deg)`;
    watermark.style.opacity = opacity;
    watermark.style.pointerEvents = 'none';
    watermark.style.position = "absolute";
    watermark.style.userSelect = "none";
    watermark.style.top = "250px";
    watermark.style.left = `${(containerWidth - totalWidth) / 2 + i * offset}px`;

    // 添加水印到容器中
    container.appendChild(watermark);
  }

循环count次，每次创建一个div元素作为水印，并将其设置为指定的文字、颜色、旋转角度、透明度、位置等样式。最后将每个水印div元素添加到水印容器中。

  // 返回水印容器
  return container;
}

返回水印容器元素。