qq网站临时会话,dedecms 调用 两个网站,泉州优化公司,软件著作权和专利的区别文章目录点击输入框提示信息防止别人盗取视频设置输入边框透明按钮跳转a标签如何具有bootstra按钮样式formData的使用boostrap上传样式jq获取input标签的值jq获取最近一个td标签的值css设置几个div中的图片保持在一条水平线使div居中canvas 网页背景 粒子鼠标跟随磁力登录界面添…
文章目录点击输入框提示信息防止别人盗取视频设置输入边框透明按钮跳转a标签如何具有bootstra按钮样式formData的使用boostrap上传样式jq获取input标签的值jq获取最近一个td标签的值css设置几个div中的图片保持在一条水平线使div居中canvas 网页背景 粒子鼠标跟随磁力登录界面添加背景获取当前时间html空格符号代码RGB颜色值与十六进制颜色码转换在线考试防作弊js实现代码完整版css全局定位内容图片自动居中html中设置透明jQuery图片上传插件支持批量上传、预览、删除、放大、上传数量和尺寸限制以及上传前、上传中和上传后的回调调色也是一种技术点击输入框提示信息
1. 添加CDN
script srchttps://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js/script
script srchttps://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js/script2.Html代码
div classform-label-groupinput keyupchangevalue data-togglepopover data-content学号登录 v-modelnumber typetext nameusername idusername classform-control autocompleteoff disableautocompletelabel forusername idnumber学号/label
/div
div classform-label-group
!-- input keyupchangevalue v-modelpassword typepassword namepassword idpassword classform-control autocompleteoff disableautocomplete--input keyupchangevalue data-togglepopover data-content默认密码为:123456 v-modelpassword typepassword namepassword idpassword classform-control autocompleteoff disableautocompletelabel forpassword idpwd密码/label
/div3.JS代码
$(document).ready(function(){$([data-togglepopover]).popover();});4.效果图
防止别人盗取视频
style typetext/cssvideo::-internal-media-controls-download-button{display:none;}video::-webkit-media-controls-enclosure{overflow:hidden;}video::-webkit-media-controls-panel{width: calc(100% 30px);}
/style设置输入边框透明
border: 1px solid rgb(0,0,0,0.1);按钮跳转
单独一个链接实现跳转
input typebutton value我是一个按钮
οnclickjavascrtpt:window.location.hrefhttp://baidu.com触发一个函数跳转
script
function jump(){window.location.hrefhttp://baidu.com;
}
/scriptinput typebutton value我是一个按钮 οnclickjavascrtpt:jump()a标签如何具有bootstra按钮样式
a classbtn btn-primary :hrefjavascript: onPageTap(../news/news-detail.html?id${item.id}tablenamenews) stylecolor: #FFFFFF/aformData的使用 div classcol-md-4 !--文件上传--button typebutton classbtn btn-warning data-togglemodal data-target#exampleModal3 上传文件/buttondiv classmodal fade idexampleModal3 tabindex-1 roledialog aria-labelledbyexampleModalLabel aria-hiddentruediv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerh5 classmodal-title idexampleModalLabel3上传文件/h5button typebutton classclose data-dismissmodal aria-labelClosespan aria-hiddentruetimes;/span/button/divdiv classmodal-body!-- input idlefile typefile styledisplay:none --div classinput-append!-- label classcol-form-label上传文件/label--input classinput-large typefile namelefile idlefile styleheight:30px;/div/divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-dismissmodal 取消/buttonbutton typebutton classbtn btn-primary onclickuploadfile(this)确定/button/div/div/div/div/divfunction uploadfile(d) {var username [[${username}]];var filepath /username ;var files $(#lefile).prop(files);// alert(username);// alert(filepath);var objectfile new FormData();objectfile.append(lefile, files[0]);objectfile.append(username, username);objectfile.append(filepath, filepath);// alert(objectfile);$.ajax({async: false,cache: false,url:/uploadfile,type:post,data:objectfile,processData: false,contentType: false,dataType:json,success:function (data) {if (data.result1){window.location.href/main/username;}else {alert(上传失败);}}})};RequestMapping(/uploadfile)ResponseBodypublic MapString,Integer uploadFile(RequestParam(lefile) MultipartFile file, RequestParam(username) String username, RequestParam(filepath) String filepath) throws URISyntaxException, IOException, InterruptedException {FileSystem fsFileSystem.get(new URI(hdfs://192.168.43.60:9000),new Configuration(),hadoop);String filename file.getOriginalFilename();String FilePath src/main/resources/static/doc/username/;System.out.println(FilePath);File goalfile new File(FilePath);if(!goalfile.exists()){goalfile.mkdirs();}Path clientPath new Path(FilePathfilename);Path serverPath new Path(filepath);FileOutputStream outfile new FileOutputStream(FilePathfilename);outfile.write(file.getBytes());outfile.flush();outfile.close();fs.copyFromLocalFile(false,clientPath,serverPath);fs.close();MapString,Integer mapnew HashMap();map.put(result,1);System.out.println(map);return map;}boostrap上传样式
input idlefile typefile styledisplay:none
div classinput-appendinput idphotoCover classinput-large typefile styleheight:30px;button classbtn οnclick$(input[idlefile]).click();Browse/button
/divscript typetext/javascript
$(input[idlefile]).change(function() {
$(#photoCover).val($(this).val());
});
/scriptjq获取input标签的值
$(#Id).val()jq获取最近一个td标签的值 var path $(thisObject).closest(tr).find(.filepath).text();var name $(thisObject).closest(tr).find(.name).text();css设置几个div中的图片保持在一条水平线
所有相关的div的样式设置为
{height60px; line-height: 60px; } //这表示所有div行高一样把所有img的样式设置为
{vertical-align: middle ; } 这个表示所有img的基线设置在同一个水平线使div居中
top:50%;
left:50%;
transform: translate(-50%,-50%);canvas 网页背景 粒子鼠标跟随磁力
bg.js
var CanvasParticle (function(){function getElementByTag(name){return document.getElementsByTagName(name);}function getELementById(id){return document.getElementById(id);}// 根据传入的config初始化画布function canvasInit(canvasConfig){canvasConfig canvasConfig || {};var html getElementByTag(html)[0];// 获取body作为背景// var body getElementByTag(body)[0];// 获取特定div作为背景// mydiv是你想要将其作为背景的div的IDvar body document.getElementById(mydiv);var canvasObj document.createElement(canvas);var canvas {element: canvasObj,points : [],// 默认配置config: {vx: canvasConfig.vx || 4,vy: canvasConfig.vy || 4,height: canvasConfig.height || 2,width: canvasConfig.width || 2,count: canvasConfig.count || 100,color: canvasConfig.color || 121, 162, 185,stroke: canvasConfig.stroke || 130,255,255,dist: canvasConfig.dist || 6000,e_dist: canvasConfig.e_dist || 20000,max_conn: 10}};// 获取contextif(canvas.element.getContext(2d)){canvas.context canvas.element.getContext(2d);}else{return null;}body.style.padding 0;body.style.margin 0;// body.replaceChild(canvas.element, canvasDiv);body.appendChild(canvas.element);canvas.element.style position: fixed; top: 0; left: 0; z-index: -1;;canvasSize(canvas.element);window.onresize function(){canvasSize(canvas.element);}body.onmousemove function(e){var event e || window.event;canvas.mouse {x: event.clientX,y: event.clientY}}document.onmouseleave function(){canvas.mouse undefined;}setInterval(function(){drawPoint(canvas);}, 40);}// 设置canvas大小function canvasSize(canvas){// 获取窗口的宽高// canvas.width window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth;// canvas.height window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight;// 获取特定div的宽高var width document.getElementById(mydiv).style.width;var height document.getElementById(mydiv).style.height;width parseInt(width);height parseInt(height);canvas.width width || window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth;canvas.height height || window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight;}// 画点function drawPoint(canvas){var context canvas.context,point,dist;context.clearRect(0, 0, canvas.element.width, canvas.element.height);context.beginPath();context.fillStyle rgb( canvas.config.color );for(var i 0, len canvas.config.count; i len; i){if(canvas.points.length ! canvas.config.count){// 初始化所有点point {x: Math.floor(Math.random() * canvas.element.width),y: Math.floor(Math.random() * canvas.element.height),vx: canvas.config.vx / 2 - Math.random() * canvas.config.vx,vy: canvas.config.vy / 2 - Math.random() * canvas.config.vy}}else{// 处理球的速度和位置并且做边界处理point borderPoint(canvas.points[i], canvas);}context.fillRect(point.x - canvas.config.width / 2, point.y - canvas.config.height / 2, canvas.config.width, canvas.config.height);canvas.points[i] point;}drawLine(context, canvas, canvas.mouse);context.closePath();}// 边界处理function borderPoint(point, canvas){var p point;if(point.x 0 || point.x canvas.element.width){p.vx -p.vx;p.x p.vx;}else if(point.y 0 || point.y canvas.element.height){p.vy -p.vy;p.y p.vy;}else{p {x: p.x p.vx,y: p.y p.vy,vx: p.vx,vy: p.vy}}return p;}// 画线function drawLine(context, canvas, mouse){context context || canvas.context;for(var i 0, len canvas.config.count; i len; i){// 初始化最大连接数canvas.points[i].max_conn 0;// point to pointfor(var j 0; j len; j){if(i ! j){dist Math.round(canvas.points[i].x - canvas.points[j].x) * Math.round(canvas.points[i].x - canvas.points[j].x) Math.round(canvas.points[i].y - canvas.points[j].y) * Math.round(canvas.points[i].y - canvas.points[j].y);// 两点距离小于吸附距离而且小于最大连接数则画线if(dist canvas.config.dist canvas.points[i].max_conn canvas.config.max_conn){canvas.points[i].max_conn;// 距离越远线条越细而且越透明context.lineWidth 0.5 - dist / canvas.config.dist;context.strokeStyle rgba( canvas.config.stroke , (1 - dist / canvas.config.dist) )context.beginPath();context.moveTo(canvas.points[i].x, canvas.points[i].y);context.lineTo(canvas.points[j].x, canvas.points[j].y);context.stroke();}}}// 如果鼠标进入画布// point to mouseif(mouse){dist Math.round(canvas.points[i].x - mouse.x) * Math.round(canvas.points[i].x - mouse.x) Math.round(canvas.points[i].y - mouse.y) * Math.round(canvas.points[i].y - mouse.y);// 遇到鼠标吸附距离时加速直接改变point的xy值达到加速效果if(dist canvas.config.dist dist canvas.config.e_dist){canvas.points[i].x canvas.points[i].x (mouse.x - canvas.points[i].x) / 20;canvas.points[i].y canvas.points[i].y (mouse.y - canvas.points[i].y) / 20;}if(dist canvas.config.e_dist){context.lineWidth 1;context.strokeStyle rgba( canvas.config.stroke , (1 - dist / canvas.config.e_dist) );context.beginPath();context.moveTo(canvas.points[i].x, canvas.points[i].y);context.lineTo(mouse.x, mouse.y);context.stroke();}}}}return canvasInit;
})();body classlogin-layout idmydiv
script typetext/javascriptwindow.onload function() {//配置var config {vx: 4, //小球x轴速度,正为右负为左vy: 4, //小球y轴速度height: 3, //小球高宽其实为正方形所以不宜太大width: 2,count: 100, //点个数color: 30,144,255, //点颜色stroke: 130,255,255, //线条颜色dist: 6000, //点吸附距离e_dist: 20000, //鼠标吸附加速距离max_conn: 10 //点到点最大连接数}//调用CanvasParticle(config);}
/script效果图
登录界面添加背景
body style background: url(http://global.bing.com/az/hprichbg/rb/RavenWolf_EN-US4433795745_1920x1080.jpg) no-repeat center center fixed; background-size: 100%;div classcontainer idapp stylebackground: url(../loginbg.jpg); 获取当前时间
div classinput-group mb-3 stylewidth: 260px;left: 30pxinput typetext classform-control placeholder开始时间 idbegintime namebegintime
/div
div classinput-group mb-3 stylewidth: 260px;left: 30pxinput typetext classform-control placeholder结束时间 idovertime nameovertime
/div if (flag1){document.getElementById(begintime).value new Date().Format(yyyy-MM-dd HH:mm:ss);flag;}else {document.getElementById(overtime).value new Date().Format(yyyy-MM-dd HH:mm:ss);}Date.prototype.Format function (fmt) { //author: meizzvar o {M: this.getMonth() 1, //月份d: this.getDate(), //日H: this.getHours(), //小时m: this.getMinutes(), //分s: this.getSeconds(), //秒q: Math.floor((this.getMonth() 3) / 3), //季度S: this.getMilliseconds() //毫秒};if (/(y)/.test(fmt)) fmt fmt.replace(RegExp.$1, (this.getFullYear() ).substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp(( k )).test(fmt)) fmt fmt.replace(RegExp.$1, (RegExp.$1.length 1) ? (o[k]) : ((00 o[k]).substr(( o[k]).length)));return fmt;}html空格符号代码
nbsp; 一个字符的半角的不断行的空格如果需要在网页中插入多个空格可以将“ ”代码写多遍 ensp; 一个字符的半角的空格也可以将“ ”写多遍来插入多个空格 emsp;两个字符的全角的空格也可以将“ ”写多遍来插入更多的空格 thinsp; 小于一个字符的空格 说明单词后面的分号记得带上是不能省略的它也是html代码中的一部分。
RGB颜色值与十六进制颜色码转换
RGB颜色值与十六进制颜色码转换工具
在线考试防作弊js实现代码完整版
!--考试防作弊--
script typetext/javascript
//屏蔽右击
document.body.oncontextmenudocument.body.ondragstart document.body.onselectstartdocument.body.onbeforecopyfunction() {return false;
};//窗口失焦、大小变化监听
var blurNum1;
$(window).on(blur resize,function() {if(blurNum3) {alert(你已经违规3次考试结束);$(window).off(beforeunload);CloseWebPage();} else {alert(考试中切换窗口违规blurNum次);}blurNum;
});$(window).on(beforeunload, function() {$(this).off(blur resize);return 离开此页面将退出考试!;
});//关闭窗口方法
function CloseWebPage() {if (navigator.userAgent.indexOf(MSIE) 0) {if (navigator.userAgent.indexOf(MSIE 6.0) 0) {window.opener null;window.close();} else {window.open(, _top);window.top.close();}} else if (navigator.userAgent.indexOf(Firefox) 0) {window.location.href about:blank ;} else {window.opener null;window.open(, _self, );window.close();}
}
/script防止刷新。 因为浏览器都自带了刷新返回等按钮因此只想到了弹出窗口的形式。
/* * param url 考试界面的链接 * param name 新窗口的名称没有可填空 * 属性menubarno 新窗口隐藏菜单栏防刷新即基本实现 */
window.open( url, name, menubarno )接下来在防止切屏内一并处理。 防止切屏。主要思路是屏蔽键盘快捷键和鼠标切换。 屏蔽切换组合键如下
function stopShortCutKey() { //屏蔽鼠标右键、Ctrln、shiftF10、F5刷新、退格键 if ( (window.event.altKey) ((window.event.keyCode 37) || (window.event.keyCode 39) ) ) { alert(不准你使用ALT方向键前进或后退网页);return false;}if ((event.keyCode 116) || //屏蔽 F5 刷新键 (event.keyCode 112) || //屏蔽 F1 刷新键 (event.ctrlKey event.keyCode 82)) { //Ctrl R return false;}if ((event.ctrlKey) (event.keyCode 78)){return false; //屏蔽 Ctrln } if ((event.shiftKey) (event.keyCode 121)) { //屏蔽 shiftF10 return false;}if (window.event.srcElement.tagName A window.event.shiftKey){return false; //屏蔽 shift 加鼠标左键新开一网页 }if ((window.event.altKey) (window.event.keyCode 115)) { //屏蔽AltF4 window.showModelessDialog(about:blank, , dialogWidth:1px;dialogheight:1px);return false;}if ((window.event.altkey) (window.event.keyCode 27)) { alert(认真答题); }
}屏蔽鼠标切屏 window系统上win tab 组合键属于系统级别的快捷键无法操作。我想到了监听网页失焦事件。
var allowNum 3; // 允许三次切屏超过则提交window.onblur function() { if(allowNum 1) { submitTest() } allowNum--; alert(您已切屏,超过三次自动提交试卷}禁止窗口大小改变 监听窗口改变的事件如下但由于它会默认触发onblur事件( 因为点击窗口按钮已经在页面之外无法监听了所以失焦函数会触发为防止两次触发切屏故只用上面的函数进行监听。
window.onresize()css全局定位内容图片自动居中 .content img {max-width:800px;_width:expression(this.width 800 ? 800px : this.width); //控制图片整体大小clear: both; display: block; margin:auto; }html中设置透明
background:rgba(0,0,0,.5);节点里面的元素透明
background:#000000;opacity:0.5;5为透明度
jQuery图片上传插件支持批量上传、预览、删除、放大、上传数量和尺寸限制以及上传前、上传中和上传后的回调
jQuery图片上传插件
调色也是一种技术 pink mistyrose aliceblue lavender honeydew paleturquoise lightbluelightskyblue powderblue paleturquoise skyblue cadetblue cornflowerblue steelblue
