水印效果

最近银行的项目需要在项目中的所有页面加载水印，而且水印的样式也有要求，要有银行的logo，登录用户的用户名、IP等信息，同时还有时间，时间每秒动态变化。本来是前端的活，但项目组暂时没有前端，只能客串前端处理一下这个需求。
网上找到了一个很好用的水印，GitHub地址：github.com/saucxs/wate…，使用方法在readme中介绍的也比较详细了，我就不在着过多的说明，有兴趣的可以到GitHub上去看看。 水印的原理说起来也很简单，就是动态创建一个div，设置zIndex让div显示在最低层，在页面铺满。生成多少个div可以铺满页面，需要拿到页面的weith和height，根据div的大小及间距去计算。 贴一下readme中的效果图：
时间每秒动态变化，只需要在前端页面通过setinterval每秒调用一下watermark的load方法，把时间传入即可。
水印的样式要求就要根据甲方爸爸的需求动态去生成了。
贴一下一个后端写的生成div的js：

var line1_div = document.createElement('div');
line1_div.setAttribute('style', 'display: flex;align-items: center;color: #b5b5b5;font-size: 20px;border-bottom: 1px solid #b5b5b5;padding-bottom: 3px;margin-bottom: 3px;font-weight: bold;');

var img = document.createElement("img");
img.setAttribute("id", "newImg");
img.src = _ctx_ + "/static/images/watermark_logo.png";
img.setAttribute('style','width: 30px; height: 30px; margin-right: 10px;')
line1_div.appendChild(img);
// 第一行
var line1_p = document.createElement("p");
line1_p.setAttribute('style','margin: 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;')
line1_p.textContent = defaultSettings.watermark_txt_name + " " + defaultSettings.watermark_txt_code;
line1_div.appendChild(line1_p);
mask_div.appendChild(line1_div);
// 第二行
var line2_div = document.createElement('div');
line2_div.setAttribute('style', 'display: flex; align-items: center; font-size: 10px; color: #b5b5b5;');

var line2_p1 = document.createElement("p");
line2_p1.setAttribute('style','margin: 0;margin-right: 14px;')
line2_p1.textContent = 'IP:' + defaultSettings.watermark_txt_ip;
line2_div.appendChild(line2_p1)

var line2_p2 = document.createElement("p");
line2_p2.setAttribute('style','margin: 0;-webkit-transform-origin-x: 0;')
line2_p2.textContent = defaultSettings.watermark_txt_date;
line2_div.appendChild(line2_p2)
mask_div.appendChild(line2_div);

替换掉watermark.js中动态生成div的代码就可以满足甲方爸爸的需求了。
还是要学习一下前端的基础知识，要不没有前端支持，一个很简单的前端问题能墨迹半天。