今天我們來講一下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添加水印的方法，并通過實例展現了簡單水印和動態水印的實現過程。如果您有其他水印的實現方式，歡迎在評論區分享哦！