【JavaScript】鼠标禁止右键禁止打开控制台及键盘禁用 // 1.禁用右键菜单 document.oncontextmenu = new Function("event.returnValue=false"); // 2.禁用鼠标选中 document.onselectstart = new Function("event.returnValue=false"); document.onkeydown = () => { console.log(window.event.keyCode); for (let i = 9; i < 47; i++) { if (window.event && window.event.keyCode == i) { return false; } } for (let i = 58; i < 65; i++) { if (window.event && window.event.keyCode == i) { return false; } } for (let i = 91; i < 300; i++) { if (window.event && window.event.keyCode == i) { return false; } } // 禁用ctrl+shift+i if (window.event.ctrlKey && window.event.shiftKey && window.event.keyCode == 73) { return false; } if (window.event.shiftKey) { return false; } // 禁用ctrl+r if (window.event.ctrlKey && window.event.keyCode == 82) { return false; } }

【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: '#aaa', //水印字体颜色 watermark_alpha: 0.4, //水印透明度 watermark_fontsize: '15px', //水印字体大小 watermark_font: '微软雅黑', //水印字体 watermark_width: 210, //水印宽度 watermark_height: 80, //水印长度 watermark_angle: 20 //水印倾斜度数 }; 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 cutWidth = page_width * 0.0150; var page_width = page_width - cutWidth; //获取页面最大高度 var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 450; page_height = Math.max(page_height, window.innerHeight - 30); //如果将水印列数设置为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)); defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1)); } //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔 if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) { defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space)); defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1)); } 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)); //设置水印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'; 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"; oTemp.appendChild(mask_div); }; }; document.body.appendChild(oTemp); } function getNow() { var d = new Date(); var year = d.getFullYear(); var month = change(d.getMonth() + 1); var day = change(d.getDate()); var hour = change(d.getHours()); var minute = change(d.getMinutes()); var second = change(d.getSeconds()); function change(t) { if (t < 10) { return "0" + t; } else { return t; } } var time = year + '年' + month + '月' + day + '日 ' + hour + '时' + minute + '分' + second + '秒'; return time; }使用方法：var now = getNow(); watermark({ "watermark_txt": "小破孩的小站" + now });var now = getNow();

【Layui】layui自动关闭页面 layui <script> layui.use('layer',function(){ var layer = layui.layer; layer.ready(function(){ layer.msg('操作成功，3秒后会自动关闭当前页面！', {offset: '15px',icon: 1,time: 3000}, function(){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index) window.parent.location.reload(); return false; }); }); }); </script> js <div id="box"> <p>页面在 <span id="Os">5</span> s后跳转 </p> </div> <script> var Os=document.getElementById("Os"); var num=5; var timer=setInterval(function () { num--; Os.innerText=num; if(num==0){ window.location.href="https://www.baidu.com/"; } },1000) </script>

【JavaScript】js接受后端变量处理数组 eval（） 前端 var arr = eval("{$arr}"); 后端： $arr = json_encode($dtArr); 'arr' => str_replace('"','',$arr),

【JavaScript】JS实现图片防盗链 // js部分 const fs = require('fs'); const path = require('path'); const http = require('http'); const url = require('url'); const getHostName = function (str) { let { hostname } = url.parse(str); return hostname; }; http.createServer((req, res) => { let refer = req.headers['referer'] || req.headers['referrer']; // 请求头都是小写的 // 先看一下refer的值，去和host的值作对比，不相等就需要防盗链了 // 要读取文件 返回给客户端 let { pathname } = url.parse(req.url); let src = path.join(__dirname, 'public', '.' + pathname); // src代表我要找的文件 fs.stat(src, err => { // 先判断文件存不存在 if (!err) { if (refer) { // 不是所有图片都有来源 let referHost = getHostName(refer); let host = req.headers['host'].split(':')[0]; if (referHost !== host) { // 防盗链 fs.createReadStream(path.join(__dirname, 'public', './1.jpg')).pipe(res); } else { // 正常显示，如果路径存在，可以正常显示直接返回 fs.createReadStream(src).pipe(res); } } else { // 正常显示，如果路径存在，可以正常显示直接返回 fs.createReadStream(src).pipe(res); } } else { res.end('end'); } }); }).listen(8888); <-- html部分 --> <body> <img src="http://www.chenhd.me:8888/2.png" /> </body> 文章引用：https://juejin.cn/post/6844903596937461773

【JS】解决百度统计被刷广告的办法，屏蔽非法广告 百度统计被刷广告的原理想要斩草除根，就需要知己知彼，明白他们操作的原理以后，就可以有效的遏制他们无下限的刷广告。他们是这样做的，先写一个机器爬虫，爬取页面内容，寻找「hm.baidu.com/hm.js」如果找到了就说明你使用了百度统计，然后再取后面的参数，就得到了你的百度统计ID，然后保存到数据库，拿到你的的百度统计ID以后，就可以进行下一步，使用程序批量的给百度统计接口发送数据，也就是说这些内容他们根本不是真的去你的网站，而是直接给百度统计的接口提交了数据，对你的网站流量没有任何贡献，你只有看广告的份。我也是被刷广告刷的很严重，是在忍无可忍，必须解决一下他们了。百度统计给我们的代码：<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?868e22cfca30f68b16f4c32562c7e649"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>将百度统计的特征，也就是地址打散成数组，再组装使用：var _hmt = _hmt || []; (function() {     var hm = document.createElement("script");     var analytics_bd = '868e22cfca30f68b16f4c32562c7e649';     hm.src = ['ht', 't', 'ps', ':/', '/h', 'm', '.', 'ba', 'i', 'd', 'u.c', 'o', 'm/', 'h', 'm', '.j', 's?', analytics_bd].join('');     var s = document.getElementsByTagName("script")[0];     s.parentNode.insertBefore(hm, s);})();需要改动的就只有一行，注意「hm.src = "https://hm.baidu.com/hm.js?868e22cfca30f68b16f4c32562c7e649";」这行代码，被拆散为数组，然后再拼装起来使用。这样他们的爬虫程序就无法识别到你在使用百度统计了。

【JS】静止事件的脚本 //关闭右键 document.oncontex`请输入代码`tmenu=function(){event.returnValue=false;} //关闭所有f2-f12快捷键 屏蔽 Ctrl+n document.onkeydown=function(){if(111<event.keyCode<123||(event.ctrlKey&&(event.keyCode==78))){event.keyCode=0;event.returnValue=false;}} //关闭 f1帮助 document.onhelp=function(){event.returnValue=false;} //关闭shift+点击链接 document.onclick=function(){if(event.shiftKey&&(event.srcElement.tagName=="A")){event.returnValue=false;}} //禁止拷贝 document.oncopy=function(){event.returnValue=false;} //禁止选择 document.onselectstart=function(){event.returnValue=false;} //禁止粘贴 document.onpaste=function(){event.returnValue=false;} //禁止 退格键的 前进后退功能 document.onkeydown = function() {}//{if (event.keyCode==8) {event.returnValue=false;}} //禁止打印 window.onbeforeprint=function(){window.document.body.style.display="none"}

【JavaScript】JavaScript基础-ES6新语法 const 变量不变 let 变量可变 箭头函数,支持默认设置参数 const fn=(a=1,b=2)=>{return a+b;} const fn1 = (a,b)=>a+b; //简写,当返回值可省略括号 字符模板,不再使用+链接字符串 const a = 20; const b = 30; const string = `${a}+${b}=${a+b}`; 解析结构 const obj={ a:1, b:2, c:3 } const {a,b}=obj; 对象解析结构 let [a, b, c] = [1, 2, 3];数组的解析结构 let [a, ...b] = [1, 2, 3]; 剩余运算 a=1 b=[2,3] 简写,当属性和值相同 const person = { name, age,fn(){ return this.name; } }等价 var person = { name: name, age: age , fn:function fn(){ return this.name; } }; 类 class Person { //构造方法 constructor(name, age) { this.name = name; this.age = age; } getName() { return this.name } } 模块 接口定义可以是变量,函数,类 var m=1 export {m} export default默认方法或变量 import {m} from 'm';

【JavaScript】JavaScript基础-本地存储 sessionStorage 支持IE8+ 火狐,chrome等用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。 sessionStorage.setItem('testKey','这是一个测试的value值'); sessionStorage['testKey'] = '这是一个测试的value值'; sessionStorage.getItem('testKey'); sessionStorage['testKey']; sessionStorage.setItem('user', JSON.stringify(userEntity)); 存储对象 var userJsonStr = JSON.parse(sessionStorage.getItem('user')); sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。 sessionStorage.clear() localStorage 即本地存储，可用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除数据比较大的临时保存方案。如在线编辑文章时的自动保存。多页面访问共同数据 localStorage.setItem('testKey','这是一个测试的value值'); localStorage['testKey'] = '这是一个测试的value值'; localStorage.getItem('testKey'); localStorage['testKey']; localStorage.setItem('user', JSON.stringify(userEntity)); var userJsonStr = JSON.parse(( localStorage .getItem('user')); localStorage.removeItem(string key) localStorage.clear()

【JavaScript】JavaScript基础-语言基础 数据类型 undefined,null,boolean,number,string,Array基本数据类型 Object复杂数据类型 类型转换 parseInt("666" ) 非数字返回NaN parseFloat("2.45"); (1).toString(); (10).toString(2);//二进制 String(undefined); null也会输出字符串 !!"3.5" true typeof null; object 字符串 "123我爱你".charAt(3) 返回我,3是位置 "123我爱你".indexOf("我") 返回3 找不到-1 "123我爱你".match(/爱(.*)/) 返回数组 ["爱你", "你"] 没有找到返回 null "我爱你中国美国英国".substring(1,4); 返回爱你中,从第1到4不包括4 "我爱你中国美国英国".substr(3,5) 第三个开始截取5个字符 "我爱你中国人".replace(/中国/,"美国"); "我爱你中国人".search(/中国/); 找到返回下标 没找到返回-1 "123我爱你".split(""); 返回数组 支持正则 "aA".toLowerCase();转小写 toUpperCase大写 var string = (2).toString(); var string = 2+''; 数组 var arr =Array(1,2,3); var arr =[1,2,3]; var arr ={"31536000":"年","2592000":"个月","604800":"星期","86400":"天","3600":"小时","60":"分钟","1":"秒"}; [1,2,3].join(',')//数组转换字符串 '1,2,3'.split(',')//字符串转换数组 $.isArray([]);// 是否数组 返回true arr.push("white","test");//尾部插入数组值 返回长度 arr.unshift("first"); //头部插入 arr.pop();//尾部删除 返回被删除元素 arr.shift();//头部删除 arr.reverse();//颠倒数组 arr.sort(function(num1, num2) { return num1 > num2;});//排序 返回排序后 arr.concat(["ccc","bbbb"],'3333',['vvccxx',['oolll','lll']]);//合并数组 返回新数据 arr.slice(1,3); //复制数组 从第一个开始第三个结束 返回新数组 arr.splice(0,2);//删除前两个 arr.splice(1,1,100,200);//从第二个删除1个 并添加2个新元素 var max = Math.max.apply(Math, arr) //3 var min = Math.min.apply(Math,arr) //1 arr.indexOf(str);//查找元素位置 字符操作 var arr=["中国","美国","日本","韩国"]; arr.forEach(function(v,k){ log(k)无返回值 }) arr.map(function(value,index,array){ 　　return XXX }) json与对象 var str = '{"a":"2a","b":true,"c":34,"d":[1,2,"a"]}';//json操作 JSON.parse(str);//json字符串转换成对象 var obj = eval('(' + str + ')');//3种方法 var k1 = {a:1,b:[1,2]};//对象 var k2 = {"k1":1,"k2":"中国"};//json标准格式 或者是关联数组 JSON.stringify(k1) //json对象转换成字符串 时间戳13位长 +new Date() 当前时间戳 +new Date('2014/12/24 02:08:01'); 转换时间戳 Date.now() 当前时间戳 new Date(Date.parse("2012-12-15 09:41:30".replace(/-/g,"/"))); Date对象 new Date(1419184274000) Date对象

【JavaScript】JavaScript基础-浏览器对象 弹出框 alert(1); var ret = prompt("请输入内容！",""); var v = confirm('此操作不可恢复，确认吗？'); 返回true可操作 window.close();关闭当前窗口 window.print();打印 计时器 function fn() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("a1").innerHTML=t; } var t = setTimeout("fn()",5000); 执行一次 clearTimeout(t); 提前结束 var id=setInterval("fn()",1000);//每1秒执行一次 clearInterval(id); 取消定时 读写localStorage,长时间存储 sessionStorage关闭后删除 localStorage.setItem("key1", "123"); localStorage.removeItem("bar"); var foo = localStorage.getItem("bar"); 选择器 var id=document.getElementById("id"); var id = document.querySelector("#k"); 支持标签,.class,a[target=_blank]属性 var id = document.querySelectorAll("li"); window document.write("123") 输出 console.log("控制台") var url = location.href; location.href='http://www.baidu.com'; var domain = document.domain;//不含http var url = (window.location.href).substring(0,(window.location.href).indexOf(document.location.pathname));//包含http var from = document.referrer;来源 location.reload(true);刷新 history.go(0); history.go(1);前进 history.go(-1);后退 document.title; document.title = "标题"; document.querySelector('#c').dataset.sex = "男";data属性 document.querySelector('#c').dataset.sex; document.getElementById('demo1').setAttribute('role', 'button'); 设置获取属性 document.getElementById('foo').removeAttribute('role'); document.getElementById('foo').innerHTML = 'Goodbye!';设置值 逻辑 if (time<10) { document.write("<b>早上好</b>"); } else if (time>=10 && time<16) { document.write("<b>今天好</b>"); } else { document.write("<b>晚上好!</b>"); } switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码 } for (var i=0;i<cars.length;i++) { document.write(cars[i] + "<br>"); } while (条件) { 需要执行的代码 } 监听事件 var el= document.querySelector('#btn'); el.addEventListener('click',function(){ document.getElementById('loading1').classList.add('loading1'); })

【JavaScript】JS获取时间 //获取时间 <script type="text/javascript"> function time(){ var vWeek,vWeek_s,vDay; vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]; var date = new Date(); year = date.getFullYear(); month = date.getMonth() + 1; day = date.getDate(); hours = date.getHours(); minutes = date.getMinutes(); seconds = date.getSeconds(); vWeek_s = date.getDay(); document.getElementById("time").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes +":" + seconds + "\t" + vWeek[vWeek_s] ; }; setInterval("time()",1000); </script>