js页面添加水印(javascript 添加水印)

今天我们来讲一下JavaScript添加水印的方法。在网站开发中，有时我们需要给页面添加一些水印，以表明版权或者防止他人盗用。这时候JavaScript的添加水印功能就可以派上用场。

首先思考一下水印的实现方式。如果直接在HTML中写入水印，那么一旦页面被盗用或者复制，水印也就完全失去了作用。而通过JavaScript添加水印，则可以有效保护我们的版权，因为任何人都无法修改JavaScript文件。

那么我们来看一下JavaScript添加水印的实现过程。一般来说，我们可以创建一个DIV元素，设置其CSS样式，并使用JavaScript语句将其添加到body中。示例如下：

var waterMarkDiv = document.createElement('div');
waterMarkDiv.style.position = 'fixed';
waterMarkDiv.style.bottom = '0';
waterMarkDiv.style.right = '0';
waterMarkDiv.style.zIndex = '9999';
waterMarkDiv.style.color = '#e0e0e0';
waterMarkDiv.style.fontSize = '16px';
waterMarkDiv.style.opacity = '0.6';
waterMarkDiv.style.transform = 'rotate(-45deg)';
waterMarkDiv.style.transformOrigin = '0 0';
waterMarkDiv.innerHTML = '这是一个水印';
document.body.appendChild(waterMarkDiv);

代码解析：

1. 创建一个DIV元素：首先使用document.createElement('div')语句创建一个空的DIV元素。

2. 设置CSS样式：设置水印DIV元素的CSS样式，包括位置、样式属性、颜色等。

3. 添加元素内容：使用innerHTML语句，在水印DIV元素中添加水印内容。

4. 将元素添加到body中：使用document.body.appendChild(waterMarkDiv)语句将水印DIV元素添加到body中。

这样一来，我们的页面就加上了一个简单的水印。但如果我们想要实现更加复杂的水印效果，应该怎么办呢。

我们可以分别创建多个DIV元素，分别设置不同的CSS样式和内容。然后通过setTimeout语句，不断改变不同DIV元素的位置、不透明度等属性，实现多个动态水印的效果。代码示例：

var waterMarkArr = ['水印1', '水印2', '水印3', '水印4', '水印5'];
var rotateAngle = -45;
var centerOffset = 100;
var intervalTime = 4000;
var curIndex = 0;
function createDynamicWaterMark() {
var waterMarkDiv = document.createElement('div');
var positionLeft = Math.floor(Math.random() * (document.body.clientWidth - centerOffset) + centerOffset);
var positionTop = Math.floor(Math.random() * (document.body.clientHeight - centerOffset) + centerOffset);
var fontSize = Math.floor(Math.random() * 12 + 16);
var opacity = Math.random() + 0.4;
waterMarkDiv.style.position = 'fixed';
waterMarkDiv.style.left = positionLeft + 'px';
waterMarkDiv.style.top = positionTop + 'px';
waterMarkDiv.style.zIndex = '9999';
waterMarkDiv.style.color = '#e0e0e0';
waterMarkDiv.style.fontSize = fontSize + 'px';
waterMarkDiv.style.opacity = opacity;
waterMarkDiv.style.transform = 'rotate(' + rotateAngle + 'deg)';
waterMarkDiv.style.transformOrigin = '0 0';
waterMarkDiv.innerHTML = waterMarkArr[curIndex % waterMarkArr.length];
curIndex++;
document.body.appendChild(waterMarkDiv);
setTimeout(function() {
waterMarkDiv.style.opacity = '0';
setTimeout(function() {
document.body.removeChild(waterMarkDiv);
}, 300);
}, intervalTime);
}
createDynamicWaterMark();
setInterval(createDynamicWaterMark, intervalTime / waterMarkArr.length);

代码解析：

1. 创建动态水印：使用createDynamicWaterMark()函数创建一个DIV元素，并设置其CSS样式、位置、内容等。

2. 添加元素到body中：使用document.body.appendChild(waterMarkDiv)语句将水印DIV元素添加到body中。

3. 设置定时器：使用setTimeout语句，不断改变不同DIV元素的位置、不透明度等属性，实现多个动态水印的效果。

4. 移除元素：使用document.body.removeChild(waterMarkDiv)语句将移除水印DIV元素。

本文介绍了JavaScript添加水印的方法，并通过实例展现了简单水印和动态水印的实现过程。如果您有其他水印的实现方式，欢迎在评论区分享哦！