这段代码是给前端页面添加水印的代码..何为水印?是可以显示登录人的姓名也可以定制一些内容等...代码如下:
前提是得引用下面两个js 可以去下载引入
<html>
<head>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery.watermark.js" type="text/javascript"></script>
<style type="text/css">
tbody#t_body tr{background:transparent;}
.soso_selsect table tr{background:transparent;}
input{background:transparent;}
select{background:transparent;}
textarea{background:transparent;}
</style>
<script type="text/javascript">
//禁止复制和右键另存为
function iEsc() { return false;}
function iRec() { return true;}
function DisableKeys() {
if (event.ctrlKey || event.shiftKey || event.altKey) {
window.event.returnValue = false;
iEsc();
}
}
document.ondragstart = iEsc;
document.onkeydown = DisableKeys;
document.oncontextmenu = iEsc;
if (typeof document.onselectstart != "undefined")
document.onselectstart = iEsc;
else {
document.onmousedown = iEsc;
document.onmouseup = iRec;
}
//添加水印
function addImage(){
var managerName = "水印";
$('body').watermark({
texts : [managerName], //水印文字
textColor : "#BFBFBF", //文字颜色
textFont : '16px 微软雅黑', //字体
width : 100, //水印文字的水平间距
height : 100, //水印文字的高度间距（低于文字高度会被替代）
textRotate : -30 //-90到0， 负数值，不包含-90
});
}
</script>
</head>
<body onload="addImage()">
<p align="center">成绩表</p>
<table border="2px" align="center" bordercolor="blue" width="600px" height="300px">
<tr align="center">
<td>项目</td>
<td colspan="5" >上课</td>
<td colspan="2" >休息</td>
</tr>
<tr align="center">
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr align="center">
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>政治</td>
<td>英语</td>
<td>体育</td>
<td>历史</td>
<td>地理</td>
<td>计算机</td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td>英语</td>
<td rowspan="2">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>效果如下:
Demo下载地址:https://download.youkuaiyun.com/download/zxd8080666/10558467
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
