原生js添加文字水印

watermark('這是第一段文字','這是第二段文字')

function watermark(t1,t2) {

  var mark_divs = document.getElementsByClassName('mark_div')
    if(mark_divs.length > 0){
      for(var i = mark_divs.length - 1; i >= 0; i--){
        document.body.removeChild(mark_divs[i])
      }
    }
  var maxWidth = document.documentElement.offsetWidth;
  var maxHeight = document.documentElement.offsetHeight;
  var intervalWidth = 340;    //間隔寬度
  var intervalheight = 200;   //間隔高度
  var rowNumber = (maxWidth - 40 -200) / intervalWidth;    //橫向個數
  var coumnNumber = (maxHeight - 40-80) / intervalheight;   //縱向個數

  //默認設置
  var defaultSettings = {
    watermark_color: '#aaa', //水印字體顏色
    watermark_alpha: 0.4, //水印透明度
    watermark_fontsize: '14px', //水印字體大小
    watermark_font: '微軟雅黑', //水印字體
    watermark_width: 200, //水印寬度
    watermark_height: 80, //水印長度
    watermark_angle: 15 //水印傾斜度數
    };
    var _temp = document.createDocumentFragment();
    for(var i = 0; i < rowNumber; i++){
      for(var j = 0; j < coumnNumber; j++){
        var x = intervalWidth*i + 20;
        var y = intervalheight*j + 30;
        var mark_div = document.createElement('div');
        mark_div.id = 'mark_div' + i + j;
        mark_div.className = 'mark_div';
        ///三個節點
        var span0 = document.createElement('div');
        span0.appendChild(document.createTextNode(t1));
        var span1 = document.createElement('div');
        span1.appendChild(document.createTextNode(t2));
        mark_div.appendChild(span0);
        mark_div.appendChild(span1);
        //設置水印div傾斜顯示
        mark_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
        mark_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
        mark_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
        mark_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
        mark_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
        mark_div.style.visibility = "";
        mark_div.style.position = "absolute";
        mark_div.style.left = x + 'px';
        mark_div.style.top = y + 'px';
        mark_div.style.overflow = "hidden";
        mark_div.style.zIndex = "9999";
        mark_div.style.pointerEvents = 'none'; //pointer-events:none  讓水印不阻止交互事件
        mark_div.style.opacity = defaultSettings.watermark_alpha;
        mark_div.style.fontSize = defaultSettings.watermark_fontsize;
        mark_div.style.fontFamily = defaultSettings.watermark_font;
        mark_div.style.color = defaultSettings.watermark_color;
        mark_div.style.textAlign = "center";
        mark_div.style.width = defaultSettings.watermark_width + 'px';
        mark_div.style.height = defaultSettings.watermark_height + 'px';
        mark_div.style.display = "block";
        _temp.appendChild(mark_div);
      }
    }
    document.body.appendChild(_temp);
}