css
#watermark {
width: 1742px;
height: 876px;
opacity: 0.5;
position: fixed;
top: 111px;
left: 0;
bottom: 10px;
z-index: 9999;
pointer-events: none;
}
#watermark span {
font-size: 15px;
font-weight: bold;
color: #ccc;
/* position: absolute; */
display: inline-block;
transform: rotate(-10deg);
white-space:nowrap;
padding:40px 110px 110px 40px;
pointer-events: none;
}
html
<div id="watermark"></div>
js
function createWatermark() {
var currentDate = new Date();
var year = currentDate.getFullYear();
var month = currentDate.getMonth() + 1;
var day = currentDate.getDate();
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();
const padZero = num => String(num).padStart(2, '0');
var formattedDate = year + "年" + month + "月" + day + "日 " + padZero(hours) + ":" + padZero(minutes) + ":" + padZero(seconds);
var watermark = document.getElementById('watermark');
var angle = -30;
var top = -30;
var text = $('#sy').val()+'--'+$('#sybm').val()+'--'+formattedDate;
for (var i = 0; i < 20; i++) {
var span = document.createElement('span');
span.appendChild(document.createTextNode(text));
watermark.appendChild(span);
angle += 15;
top += 15;
}
}
createWatermark();
window.addEventListener('resize', function() {
createWatermark();
});
window.addEventListener('scroll', function() {
createWatermark();
});