页面增加水印

// 初始化
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); // 到页面中
  };
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容