JSFiddle - React, Tailwind, and code Playground

by Allie Yu

HTML

<html lang="en">
<head>
    <script type="text/javascript">
      function watermark(settings) {

        //默认设置
        var defaultSettings={
          watermark_txt:"text",
          watermark_x:20,//水印起始位置x轴坐标
          watermark_y:20,//水印起始位置Y轴坐标
          watermark_rows:20,//水印行数
          watermark_cols:20,//水印列数
          watermark_x_space:100,//水印x轴间隔
          watermark_y_space:50,//水印y轴间隔
          watermark_color:'#000000',//水印字体颜色
          watermark_alpha:0.3,//水印透明度
          watermark_fontsize:'18px',//水印字体大小
          watermark_font:'微软雅黑',//水印字体
          watermark_width:120,//水印宽度
          watermark_height:80,//水印长度
          watermark_angle:15//水印倾斜度数
        };
        //采用配置项替换默认值，作用类似jquery.extend
        if(arguments.length===1&&typeof arguments[0] ==="object" )
        {
          var src=arguments[0]||{};
          for(key in src)
          {
            if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])
              continue;
            else if(src[key])
              defaultSettings[key]=src[key];
          }
        }

        var oTemp = document.createDocumentFragment();

        //获取页面最大宽度
        var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
        //获取页面最大长度
        var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);

        //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
        if (defaultSettings.watermark_cols == 0 ||
          (parseInt(defaultSettings.watermark_x
            + defaultSettings.watermark_width *defaultSettings.watermark_cols
            + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1))
          > page_width)) {
          defaultSettings.watermark_cols =
            parseInt((page_width
              -defaultSettings.watermark_x
              +defaultSettings.watermark_x_space)
              / (defaultSettings.watermark_width
              + defaultSettings.watermark_x_space));
         ...