在看某个网站时，看到一段话想复制一下，结果复制不了。想打开F12看看元素进行复制，也不行，没有反应。最后通过打开开发者工具看看，结果一打开就跳到about:blank。看到这操作一脸懵逼，小样的，还有这种操作。于是乎复制网址地址，放到Postman中请求看看它的源码如何写的。看到如下的代码：直接去掉这段js，保存源码文件，在浏览器中打开：<!--应用插件标签start--><!--屏蔽F12审查元素--><script>document.onkeydown=function(){//keycode123=F12if(window.event&&window.event.keyCode==123){//如果这个键不能被标志，这个值为0。event.keyCode=0;event.returnValue=false;}//keyCode13=Enterif(window.event&&window.event.keyCode==13){window.event.keyCode=505;}if(window.event&&window.event.keyCode==8){alert(str+"\n请使用Del键进行字符的删除操作！");window.event.returnValue=false;}}</script><!--屏蔽开发者工具--><scripttype='text/javascript'>varh=window.innerHeight,w=window.innerWidth;window.onresize=function(){if(h!=window.innerHeight||w!=window.innerWidth){window.close();window.location="about:blank";}}</script><!--屏蔽右键菜单--><script>document.oncontextmenu=function(event){if(window.event){event=window.event;}try{varthe=event.srcElement;if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){returnfalse;}returntrue;}catch(e){returnfalse;}}</script><!--屏蔽复制--><script>document.oncopy=function(event){if(window.event){event=window.event;}try{varthe=event.srcElement;if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){returnfalse;}returntrue;}catch(e){returnfalse;}}</script><!--屏蔽剪切--><script>document.oncut=function(event){if(window.event){event=window.event;}try{varthe=event.srcElement;if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){returnfalse;}returntrue;}catch(e){returnfalse;}}</script><!--屏蔽选中--><script>document.onselectstart=function(event){if(window.event){event=window.event;}try{varthe=event.srcElement;if(!((the.tagName=="INPUT"&&the.type.toLowerCase()=="text")||the.tagName=="TEXTAREA")){returnfalse;}returntrue;}catch(e){returnfalse;}}</script>
1、自动获取navigator.clipboard.readText().then((v)=>{console.log("获取剪贴板成功：",v);}).catch((v)=>{console.log("获取剪贴板失败:",v);});2、粘贴事件获取window.addEventListener("paste",function(e){constclipdata=e.clipboardData||window.clipboardData;console.log("主动粘贴",clipdata.getData("text/plain"));});
functionconvertToPinyin(str){varpinyin=window.pinyin;//引入pinyin.js库varresult="";for(vari=0;i<str.length;i++){varchar=str.charAt(i);varp=pinyin.getFullChars(char);if(p.length>0){result+=p[0].charAt(0);}else{result+=char;}}returnresult;}你可以使用这个函数将中文字符串转换为拼音字符串，并将其输出到控制台上：varstr="js给输出的字加上拼音";varpinyinStr=convertToPinyin(str);console.log(pinyinStr);输出结果：jsgeishuchudezijiashangpinyin注意：这个函数需要使用pinyin.js库，所以你需要在代码中引入该库。
以下JS常用第三库大全：jQuery：一个快速、小巧、功能丰富的JavaScript库，用于HTML文档遍历和操作、事件处理、动画和Ajax交互。React：一个用于构建用户界面的JavaScript库，由Facebook开发，具有高效、灵活和可重用的组件化开发模式。Vue.js：一个渐进式JavaScript框架，用于构建用户界面，具有轻量级、高效、易用和可扩展的特点。AngularJS：一个由Google开发的JavaScript框架，用于构建动态Web应用程序，具有MVC架构、双向数据绑定和依赖注入等特性。Underscore.js：一个JavaScript实用工具库，提供了一组函数式编程的辅助方法，包括集合操作、函数操作、对象操作、数组操作等。Lodash：一个JavaScript实用工具库，提供了一组高效、易用、可扩展的函数式编程方法，包括集合操作、函数操作、对象操作、数组操作等。Moment.js：一个JavaScript日期处理库，用于解析、验证、操作和格式化日期和时间，支持多种语言和时区。D3.js：一个数据可视化JavaScript库，用于创建交互式、动态和可定制的图表、图形和地图等。Three.js：一个JavaScript3D图形库，用于创建高性能、交互式和可定制的3D场景、动画和游戏等。Socket.io：一个实时通信JavaScript库，用于在客户端和服务器之间建立WebSocket连接，支持双向通信、广播和房间等功能。Axios：一个基于Promise的HTTP客户端，用于浏览器和Node.js，支持拦截器、取消请求、自动转换JSON数据等功能。Express：一个基于Node.js的Web应用程序框架，用于构建RESTfulAPI和Web应用程序，具有路由、中间件、模板引擎等功能。Redux：一个JavaScript状态管理库，用于管理应用程序的状态，具有单向数据流、可预测性、可测试性等特点。Immutable.js：一个JavaScript不可变数据结构库，用于创建不可变的数据结构，具有高效、安全、可预测性等特点。Ramda：一个JavaScript函数式编程库，提供了一组函数式编程的辅助方法，包括函数组合、柯里化、管道等。Chart.js：一个JavaScript图表库，用于创建交互式、动态和可定制的图表，支持多种类型的图表和动画效果。Moment-Timezone.js：一个JavaScript日期处理库，用于解析、验证、操作和格式化日期和时间，支持多种语言、时区和夏令时。Popper.js：一个JavaScript弹出框库，用于创建弹出框、提示框、下拉菜单等，支持多种定位方式和自定义样式。Swiper.js：一个JavaScript滑动库，用于创建响应式、可定制的轮播图、画廊、滚动条等，支持多种触摸事件和动画效果。GreenSockAnimationPlatform(GSAP)：一个JavaScript动画库，用于创建高性能、流畅的动画效果，支持多种动画类型和缓动函数。Hammer.js：一个JavaScript触摸手势库，用于处理多点触摸事件，支持多种手势类型和自定义事件。PDF.js：一个JavaScriptPDF阅读器库，用于在Web浏览器中显示PDF文档，支持多种浏览器和平台。Highcharts：一个JavaScript图表库，用于创建交互式、动态和可定制的图表，支持多种类型的图表和动画效果。SocketCluster：一个实时通信JavaScript库，用于在客户端和服务器之间建立WebSocket连接，支持多种协议和可扩展性。RxJS：一个JavaScript响应式编程库，用于处理异步数据流，具有函数式编程的特点，支持多种操作符和调度器。Moment-range.js：一个JavaScript日期处理库，用于处理日期范围，支持多种日期范围操作和格式化。\Fuse.js：一个JavaScript模糊搜索库，用于在数据集中进行模糊搜索，支持多种搜索算法和自定义权重。ReactNative：一个用于构建原生移动应用程序的JavaScript框架，由Facebook开发，具有高效、灵活和可重用的组件化开发模式。Materialize：一个基于MaterialDesign的前端框架，用于构建响应式、美观的Web应用程序，具有多种组件和样式。Bootstrap：一个基于HTML、CSS和JavaScript的前端框架，用于构建响应式、美观的Web应用程序，具有多种组件和样式。NPM：一个JavaScript包管理器，用于安装、升级和管理JavaScript包，具有多种命令和配置选项。Babel：一个JavaScript编译器，用于将ES6+代码转换为ES5代码，支持多种插件和预设。Webpack：一个JavaScript模块打包器，用于将多个模块打包成一个文件，支持多种加载器和插件。ESLint：一个JavaScript代码检查工具，用于检查代码风格和错误，支持多种规则和插件。Jest：一个JavaScript测试框架，用于编写和运行单元测试和集成测试，支持多种断言和模拟。Cypress：一个JavaScript端到端测试框架，用于模拟用户行为和测试Web应用程序，支持多种命令和断言。Puppeteer：一个JavaScript爬虫和自动化测试库，用于模拟浏览器行为和操作，支持多种API和事件。Cheerio：一个JavaScript解析和操作HTML文档的库，用于爬虫和数据提取，支持多种选择器和操作。Axios-mock-adapter：一个JavaScript模拟HTTP请求和响应的库，用于测试和开发，支持多种配置和拦截器。Moment-business-days：一个JavaScript日期处理库，用于计算工作日和假期，支持多种假期和时区。React-router：一个用于构建单页应用程序的JavaScript路由库，由React开发，具有路由、嵌套路由、动态路由等功能。Redux-saga：一个用于管理异步操作的JavaScript库，用于处理副作用和异步流，具有可测试性和可重用性。React-dnd：一个用于构建拖放交互的JavaScript库，由React开发，具有拖放、排序、嵌套等功能。React-beautiful-dnd：一个用于构建美观的拖放交互的JavaScript库，由React开发，具有多种动画和自定义样式。React-bootstrap：一个基于Bootstrap的React组件库，用于构建响应式、美观的Web应用程序，具有多种组件和样式。React-select：一个用于构建美观的下拉选择框的JavaScript库，由React开发，具有多种选项和自定义样式。React-virtualized：一个用于构建虚拟滚动列表的JavaScript库，由React开发，具有高性能、可定制性和可重用性。React-helmet：一个用于管理文档头部的JavaScript库，由React开发，用于SEO和社交分享，具有多种配置和选项。React-intl：一个用于国际化的JavaScript库，由React开发，用于处理多语言和本地化，具有多种格式和选项。React-icons：一个用于添加图标的JavaScript库，由React开发，用于添加多种图标和自定义样式。以上是我为您推荐的一些JS常用第三库，希望能对您有所帮助。
常见的JS图片压缩库有以下几个：TinyPNG-一个高效的在线图片压缩工具，通过API接口可以在JavaScript中调用。ImageOptim-一个可以在Mac上运行的图像优化工具。有一个JavaScript库可以在web应用程序中使用。Kraken.io-另一个在线图像压缩服务，有一个可在JavaScript中使用的API。Imagemin-一个在Node.js中运行的本地图像压缩工具。可以通过Grunt和Gulp等构建工具使用。Sharp-一个快速的Node.js图像处理库。它可以压缩、调整大小、剪裁和格式化图像，可以使用它提供的API来进行JavaScript图像处理。
XMLHttpRequest是一种旧的API，它允许您以同步或异步方式发出HTTP请求，并且可以通过onreadystatechange和onload事件处理程序监控响应。下面是一个使用XMLHttpRequest的示例：constxhr=newXMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState===4&&this.status===200){console.log(this.responseText);}};xhr.open('GET','https://www.zhansanjie.com/api/api');xhr.send();FetchAPI是一种新的、更先进的API，它基于promise并能够处理复杂的请求和响应。下面是使用Fetch的示例：fetch('https://www.zhansanjie.com/api/api').then(response=>{if(response.status===200){returnresponse.json();}else{thrownewError('Requestfailed!');}}).then(data=>{console.log(data);}).catch(error=>{console.log(error);});在这个例子中，我们首先使用fetch请求数据，然后使用response对象处理响应。如果响应状态码是200，我们使用response.json()方法将响应数据转换为JSON格式，然后将其输出到控制台。如果状态码不是200，我们抛出一个错误。最后，我们使用catch语句处理错误。这是两种主要的HTTP请求方式，但是通过jQuery或其他库也可以实现类似的功能。
//定义积分规则construles={"login":10,//每次登录获得10分"share":5,//每次分享获得5分"comment":2//每次评论获得2分};//获取用户当前积分functiongetPoints(userId){letpoints=parseInt(localStorage.getItem(`points_${userId}`));if(isNaN(points)){points=0;localStorage.setItem(`points_${userId}`,points);}returnpoints;}//计算用户获得积分functioncalculatePoints(userId,action){constpoints=getPoints(userId);constpointsToAdd=rules[action];if(pointsToAdd){consttotalPoints=points+pointsToAdd;localStorage.setItem(`points_${userId}`,totalPoints);returntotalPoints;}else{returnpoints;}}这段代码实现了以下功能：定义了积分规则，每种操作对应一定的积分值。编写了一个获取用户当前积分的函数getPoints，从本地存储中获取指定用户的积分数据。编写了一个计算用户获得积分的函数calculatePoints，通过传递用户ID和操作类型作为参数，计算出用户获得的积分并将其保存到本地存储中。如果传递的操作类型不在积分规则中，则直接返回用户当前的积分值。请注意，这只是一个简单的示例代码，实际的积分计算需要考虑更多的因素，如积分失效、积分变化动态展示、数据同步等。因此，在实际开发中需要根据具体业务需求进行适当的修改与完善。
实现示例：<buttononclick="speak('你好')">语音播报</button><script>functionspeak(text){letutterance=newSpeechSynthesisUtterance(text);window.speechSynthesis.speak(utterance);}</script>在speak()函数中，我们创建了一个SpeechSynthesisUtterance对象，该对象包含要朗读的文本内容。然后我们调用window.speechSynthesis.speak(utterance)来播放语音。请注意，该API可以配置语音合成的语速、音调等属性，具体可以查看SpeechSynthesisUtterance的API文档。另外，不同浏览器可能存在差异，请以实际情况为准。
functiondoTTS(){varmess=document.getElementById('text').value;varmsg=newSpeechSynthesisUtterance(mess);msg.volume=100;msg.rate=1;msg.pitch=1.5;console.log(msg);window.speechSynthesis.speak(msg);}使用java实现，项目必须部署windows环境，而使用js则不需要考虑，不过可能支持的浏览器需要测试
1.判断变量是否是空值（null、undefined、空字符串）：functionisEmpty(variable){returnvariable===null||variable===undefined||variable==='';}2.判断变量的类型：functiongetType(variable){returnObject.prototype.toString.call(variable).slice(8,-1).toLowerCase();}3.防抖函数（在函数触发一段时间后再执行，若在此期间再次触发，则重新计时）：functiondebounce(fn,delay){lettimer;returnfunction(...args){if(timer)clearTimeout(timer);timer=setTimeout(()=>{fn.apply(this,args);},delay);};}4.节流函数（设定一段时间间隔，在此期间内函数只执行一次）：functionthrottle(fn,delay){lettimer;returnfunction(...args){if(!timer){timer=setTimeout(()=>{fn.apply(this,args);timer=null;},delay);}};}5.字符串截取（可保留省略号）：functiontruncate(str,len,omission='...'){if(str.length<=len)returnstr;returnstr.slice(0,len-omission.length)+omission;}数组去重：functionunique(array){constresult=[];for(leti=0;i<array.length;i++){if(result.indexOf(array[i])===-1)result.push(array[i]);}returnresult;}7.数组扁平化：functionflatten(array){returnarray.reduce((prev,curr)=>{returnprev.concat(Array.isArray(curr)?flatten(curr):curr);},[]);}8.对象属性排序：functionsortObjectProps(obj){constkeys=Object.keys(obj).sort((a,b)=>a.localeCompare(b));constresult={};keys.forEach(key=>(result[key]=obj[key]));returnresult;}9.获取浏览器滚动条的宽度：functiongetScrollbarWidth(){constouter=document.createElement('div');outer.style.visibility='hidden';outer.style.overflow='scroll';outer.style.msOverflowStyle='scrollbar';document.body.appendChild(outer);constinner=document.createElement('div');outer.appendChild(inner);constscrollbarWidth=(outer.offsetWidth-inner.offsetWidth);outer.parentNode.removeChild(outer);returnscrollbarWidth;}10.深拷贝对象：functiondeepClone(obj){consttype=getType(obj);if(type==='object'){constcloneObj={};for(letkeyinobj){cloneObj[key]=deepClone(obj[key]);}returncloneObj;}elseif(type==='array'){constcloneArr=[];obj.forEach(item=>{cloneArr.push(deepClone(item));});returncloneArr;}else{returnobj;}}以上仅是一些常用的工具方法封装，实现方式会因人而异，欢迎参考修改。
中国互联网举报中心