js页面添加水印

Html

Css



    111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111111111111111111111111111111111111111111111

function water() {
    const watermarkText = '水印文字123'; // 水印文字内容
    const wrap = document.querySelector('#water-wrapper');
    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);
        }
    }
}
water()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js页面添加水印



代码描述：在html页面添加水印代码

更新时间：2023-10-20 08:14:28

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

马楠

相关代码

js页面添加水印

最新