利用js在页面中添加水印

功能介绍：利用js在页面中添加水印，下面给大家简单介绍一下具体实现代码！

具体实现代码如下：

复制代码function water() {
  const watermarkText = '我谁水印'; // 水印文字内容
  const wrap = document.querySelector('#water-box'); //先在html中定义div id="water-box"
  const html = document.querySelector('html');
  const body = document.querySelector('body');
  html.style.margin = "0"
  html.style.padding = "0"
  body.style.margin = "0"
  body.style.padding = "0"
  wrap.style.width = "100vw"
  wrap.style.height = "100vh"
  wrap.style.display = "flex"
  wrap.style.position = "absolute"
  wrap.style.zIndex = "999999"
  wrap.style.flexDirection = "row"
  wrap.style.justifyContent = "space-around"
  wrap.style.flexWrap = "wrap"
  wrap.style.pointerEvents = "none"
  wrap.style.fontSize = "16px"
  wrap.style.color = "rgba(184, 184, 184, 0.6)"
  wrap.style.overflow = "hidden"

  const wrapWidth = wrap.offsetWidth; // 容器的宽度
  const wrapHeight = wrap.offsetHeight; // 容器的高度

  const tempSpan = document.createElement('span');
  tempSpan.innerText = watermarkText;
  tempSpan.style.visibility = 'hidden';
  document.body.appendChild(tempSpan);
  const watermarkWidth = tempSpan.getBoundingClientRect().width + 160; // 水印文本的实际宽度
  const watermarkHeight = tempSpan.getBoundingClientRect().height + 120; // 水印文本的实际高度
  document.body.removeChild(tempSpan);

  const numCols = Math.floor(wrapWidth / watermarkWidth); // 计算每行可容纳的方格数量
  const numRows = Math.floor(wrapHeight / watermarkHeight); // 计算可容纳的行数

  for (let i = 0; i < numRows; i++) {
    for (let j = 0; j < numCols; j++) {
      const watermark = document.createElement('div');
      watermark.classList.add('watermark');
      watermark.innerText = watermarkText;
      watermark.style.padding = "60px 80px"
      watermark.style.transform = "rotate(-45deg)"
      watermark.style.transformOrigin = "center center"
      wrap.appendChild(watermark);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

一款专门用于在JavaScript和TypeScript的货币处理工具库——Dinero.js

JavaScript动态日历：如何用变量num精准控制月份递增？

一款开源JavaScript库，实现图片背景色智能提取与融合——AutoHue.js

JavaScript动态绑定方法不执行正确代码示例

一个可以在网页上实现流畅、酷炫的过渡效果JavaScript工具库——Barba.js

标签： js水印

上面是“利用js在页面中添加水印”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_13508.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！