纯js实现的网页增加水印特效

使用方法

	var i = 0;
	loadSy();
    window.onresize = function(){
		loadSy();
	}
	/**
     * 页面添加水印
     */
    function loadSy () {
        var config = {
            tw: 300, //内容高度
            th: 150,  // 内容宽度
            c: 80 // 为了避免页面下方有多余的空白, 少显示一行。所以在计算每个水印高度的时候，需要加个差值，使水印分布的更均匀（一般为内容高度的一半即可）
        }
        var dom = document.getElementById("sy");
        var data = {
            name: "独家发布",
            code: "3705888",
            day: "2024119"
        }
        var width = document.body.offsetWidth;
        dom.style.width = width + "px";
        var height = document.body.offsetHeight;
        dom.style.height = height + "px";
        var wnum = parseInt(width / config.tw) || 1;
        var hnum = parseInt(height / config.th) || 1;
        var wc = (width - wnum * config.tw) / wnum - 1 || 0;
        var hc = (height - hnum * config.th + config.c) / hnum - 1 || 0;
        var num = wnum * (hnum - 1);
        var html = [];
        for (var i = 0; i < num; i++) {
            html.push('<div style="width: ' + (config.tw + wc) + 'px;height: ' + (config.th + hc) + 'px">', data.name, '<br/>', data.code, '<br/>', data.day, '</div>');
        }
        dom.innerHTML = html.join("");
    }