HTML代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<pre class="inline:true class:language-html decode:1 " ><div id="water-div" style="pointer-events: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;"> </div> <script type="text/javascript" > function watermark(txt) { //初始设置水印容器高度 var water = document.getElementById("water-div"); water.innerHTML = ""; //水印样式默认设置 var defaultSettings={ watermark_txt:txt, watermark_x:20,//水印起始位置x轴坐标 watermark_y:20,//水印起始位置Y轴坐标 watermark_rows:2000,//水印行数 watermark_cols:2000,//水印列数 watermark_x_space:50,//水印x轴间隔 watermark_y_space:30,//水印y轴间隔 watermark_color:'#aaaaaa',//水印字体颜色 watermark_alpha:0.3,//水印透明度 watermark_fontsize:'18px',//水印字体大小 watermark_font:'微软雅黑',//水印字体 watermark_width:280,//水印宽度 watermark_height:80,//水印高度 watermark_angle: 15//水印倾斜度数 }; //获取页面最大宽度 var page_width = Math.max(document.documentElement.clientWidth, window.screen.availWidth); //获取页面最大高度 var page_height = Math.max(document.documentElement.clientHeight, window.screen.availHeight); //水印数量自适应元素区域尺寸 defaultSettings.watermark_cols=Math.ceil(page_width/(defaultSettings.watermark_x_space+defaultSettings.watermark_width)); defaultSettings.watermark_rows=Math.ceil(page_height/(defaultSettings.watermark_y_space+defaultSettings.watermark_height)); var x; var y; for (var i = 0; i < defaultSettings.watermark_rows; i++) { y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i; for (var j = 0; j < defaultSettings.watermark_cols; j++) { x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j; var mask_div = document.createElement('div'); //mask_div.id = 'mask_div' + i + j; mask_div.className = 'mask_div'; //mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt)); mask_div.innerHTML=(defaultSettings.watermark_txt); //设置水印div倾斜显示 mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.visibility = ""; mask_div.style.position = "absolute"; mask_div.style.left = x + 'px'; mask_div.style.top = y + 'px'; mask_div.style.overflow = "hidden"; mask_div.style.zIndex = "9999"; mask_div.style.pointerEvents='none';//pointer-events:none 让水印不遮挡页面的点击事件 //mask_div.style.border="solid #eee 1px"; //兼容IE9以下的透明度设置 mask_div.style.filter = "alpha(opacity=50)"; mask_div.style.opacity = defaultSettings.watermark_alpha; mask_div.style.fontSize = defaultSettings.watermark_fontsize; mask_div.style.fontFamily = defaultSettings.watermark_font; mask_div.style.color = defaultSettings.watermark_color; mask_div.style.textAlign = "center"; mask_div.style.width = defaultSettings.watermark_width + 'px'; mask_div.style.height = defaultSettings.watermark_height + 'px'; mask_div.style.display = "block"; water.appendChild(mask_div); //document.getElementById("content").appendChild(mask_div); } } } function getCurrentDate(format) { var now = new Date(); var year = now.getFullYear(); //得到年份 var month = now.getMonth();//得到月份 var date = now.getDate();//得到日期 var day = now.getDay();//得到周几 var hour = now.getHours();//得到小时 var minu = now.getMinutes();//得到分钟 var sec = now.getSeconds();//得到秒 month = month + 1; if (month < 10) month = "0" + month; if (date < 10) date = "0" + date; if (hour < 10) hour = "0" + hour; if (minu < 10) minu = "0" + minu; if (sec < 10) sec = "0" + sec; var time = ""; //精确到天 if (format == 1) { time = year + "-" + month + "-" + date; } //精确到分 else if (format == 2) { time = year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec; } return time; } </script> |
调用：
|
1 |
<pre class="inline:true class:language-html decode:1 " >window.onload = function () { watermark("水印文字" + getCurrentDate(2)); }; |
效果如图：
浏览量: 10