// 初始化
this.TpWatermark(userInfo.login, '170', '400', '-20', '#999', '20', '.15');
// 函数
const TpWatermark = (
CON: any,
H: any,
W: any,
R: any,
C: any,
S: any,
O: any,
) => {
// // 判断水印是否存在,如果存在,那么不执行
// if (document.getElementById('app-id') != null) {
// return;
// }
// 日期
const date = new Date();
//年 getFullYear():四位数字返回年份
const year = date.getFullYear(); //getFullYear()代替getYear()
//月 getMonth():0 ~ 11
const month = date.getMonth() + 1;
//日 getDate():(1 ~ 31)
const day = date.getDate();
//时 getHours():(0 ~ 23)
const hour = date.getHours();
//分 getMinutes(): (0 ~ 59)
const minute = date.getMinutes();
//秒 getSeconds():(0 ~ 59)
const second = date.getSeconds();
const time = '' + year + '-' + addZero(month) + '-' + addZero(day) + ' ' + addZero(hour) + ':' + addZero(minute) + ':' + addZero(second);
const TpLine = parseInt(document.getElementById('app-di').clientWidth / W) * 2;
let StrLine = '';
for (let i = 0; i < TpLine; i++) {
StrLine +=
'<span style="display: inline-block; line-height:' +
H +
'px; width:' +
W +
'px; text-align: center; transform:rotate(' +
R +
'deg); color:' +
C +
'; font-size:' +
S +
'px; opacity:' +
O +
';">' +
CON +
' ' +
time +
'</span>';
}
const DivLine = document.createElement('div');
DivLine.innerHTML = StrLine;
const TpColumn = parseInt('20'); // 一列显示几行
let StrColumn = '';
for (let i = 0; i < TpColumn; i++) {
StrColumn +=
'<div style="white-space: nowrap;">' + DivLine.innerHTML + '</div>';
}
const DivLayer = document.createElement('div');
DivLayer.innerHTML = StrColumn;
DivLayer.id = 'tp-watermark'; // 给水印盒子添加类名
DivLayer.style.position = 'fixed';
DivLayer.style.top = '0px'; // 整体水印距离顶部距离
DivLayer.style.left = '-50px'; // 改变整体水印的left值
DivLayer.style.zIndex = '99999'; // 水印页面层级
DivLayer.style.pointerEvents = 'none';
document.getElementById('app-di').appendChild(DivLayer); // 到页面中
};
页面增加水印
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 前端vue实现页面加水印文字, 可以实现系统所有页面加水印,也可以单个页面加水印, 可更改水印颜色,下载完整代码请...
- android 添加水印 全部页面添加水印 h5 原生 https://blog.csdn.net/fantasy...