JS 获取当前IP,城市定位
突然奇想,想做一个获取当前的IP,然后可以做一些客户端的埋点之类的。网上查了很多资料,确实有很多办法可以实现。首先,用百度地图,高德地图的api是肯定可以取得你当前的IP,定位,城市的。我也试了一下可以实现,但是要注册账号之类一堆还是算是麻烦的。然后我也测试了几个记录了下来。1、获取当前IP$.ajax({ url:'https://api.ipify.org?format=jsonp', type:'GET', dataType:'jsonp', success:function(data){ console.log(data); } })这个可以获取到当前的IP,这里是外网IP{ip: '188.25.0.66'}2、获取当前IP,城市因为之前百度可以直接输入IP查找,我也测试了一下。确实也比较方便,暂时也没有太多次数限制。 $.ajax({ url:'https://qifu-api.baidubce.com/ip/local/geo/v1/district', type:'GET', dataType:'application/json', success:function(data){ console.log(data); } })返回结果{ "code": "Success", "data": { "continent": "亚洲", "country": "中国", "zipcode": "610015", "timezone": "UTC+8", "accuracy": "城市", "owner": "中国电信", "isp": "中国电信", "source": "数据挖掘", "areacode": "CN", "prov": "四川省", "city": "成都市", "district": "" }, "charge": false, "msg": "查询成功", "ip": "188.25.0.66", "coordsys": "WGS84" }
查看详情点赞2评论1收藏浏览1002023-05-21 20:39:11学习node+websocket+vue3搭建多人聊天室
跟着做小白都能做出来~~首先搭建前端Vite 项目兼容性注意Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。使用 npm或yarn、pnpm任意安装,个人推荐pnpm,原因如下快速:pnpm比传统方案(yarn, npm)安装包的速度快了两倍,甚至比yarn2,pnp模式还要快更严格高效:node_modules 中的文件是从一个单一的可内容寻址的存储中链接过来的,代码无法访问任意包monorepo:天然内置支持当仓库多包$ npm create vite@latest $ yarn create vite $ pnpm create vite1.安装并输入项目名称2.这里选择vue3.根据个人选择,这里选择js4.到这里就成功快速搭建完成vite3+vue3前端基础框架了,跟着下面的命令执行即可在vsocde编辑器中打开打开src目录,建立以下模块结构首先cofigjs这里是用来统一管理地址的,后期维护也方便只需要修改地址即可1.congfig-index.js中,这里写的是websokct// 域名地址(项目实地址)这里写的是本地的地址 const BASE_URL='127.0.0.1' // 端口号 const WS_PORT='8000' // WebSocket协议的URL export const WS_ADDRESS=`ws://${BASE_URL}:${WS_PORT}`这里的hooks是vue3借鉴的react函数式组件的优点2.hooks-index.js// 这里的index.js文件用于统一引用导出hooks的方法。更规范 import useWebSocket from './websocket' export { useWebSocket }hooks-websocket.js// 引用config-index.js封装好的WebSocket协议的URL import { WS_ADDRESS } from "../configs" // 封装一个使用websocket的高阶函数 // 这里的handleMessage用于接收及发送的消息 function useWebSocket(handleMessage) { // 建立连接(创建WebSocket对象): // const ws = new WebSocket(url, [protocol]);// url:服务器端地址;protocol:可选,指定可接受的子协议。 const ws = new WebSocket(WS_ADDRESS) const init = () => { bindEvent() } init() function bindEvent() { // ws.onopen():连接建立时触发的事件 ws.addEventListener('open', handleOpen, false); // ws.onclose():关闭连接方法 ws.addEventListener('close', handleClose, false); // ws.onerror():通信发生错误时触发 ws.addEventListener('error', handleError, false); // ws.onmessage(): 客户端接收服务器端发送的信息时触发 ws.addEventListener('message', handleMessage, false); } function handleOpen(e) { console.log('WebSocket open', e) } function handleClose(e) { console.log('WebSocket close', e) } function handleError(e) { console.log('WebSocket error', e) } return ws } export default useWebSocket3.pages-home.vue建立简单的聊天页面<script setup> // onMounted:挂载完数据 // reactive:响应式数据,reactive 参数必须是对象 (json / arr) // toRaw:响应式转化普通对象 // toRefs:降reactive中的响应式结构为一个个的ref响应式数据 import { onMounted, reactive, toRaw, toRefs } from "vue"; // 引用全局路由对象useRouter import { useRouter } from "vue-router"; // 引用hooks中封装好的高阶函数,用于消息发送 import { useWebSocket } from '../hooks' // 这里useWebSocket(handleMessage)用于接收消息 const ws = useWebSocket(handleMessage) const router = useRouter() // 定义state用于接收和发送的消息 const state = reactive({ msg: '', msgList: [] }) // 结构state const { msg, msgList } = toRefs(state) // 获取用户名,没有就跳转到登录页 let username = '' onMounted(() => { username = localStorage.getItem('username') if (!username) { router.push('/login') return } }) // 发送消息按钮 const sendMsg = () => { if (msg.length < 1) { return } // ws.send():发送信息的方法 // 由于后台接收的是JSON类型,这里发送的消息需要JSON.stringify ws.send(JSON.stringify({ id: new Date().getTime(), user: localStorage.getItem('username'), dateTime: new Date().getTime(), // 这里必须让msg失去响应式或深拷贝该值,否则造成发送的消息根据再次输入的消息发生变更 msg: toRaw(msg.value), })) // 发送完清空消息框 msg.value = '' } // 用于接收发送过来的消息 function handleMessage(e) { // 由于后台接收的是JSON类型,这里发送的消息需要JSON.parse const msgData = JSON.parse(e.data) // 向列表添加每条聊天消息 msgList.value.push(msgData) } </script> <template> <div> <ul> <li v-for="item in msgList" :key="item.id"> <p>用户名:{{ item.user }}</p> <p>{{ new Date(item.dateTime) }}</p> <p>消息:{{ item.msg }}</p> </li> </ul> <input type="text" placeholder="请输入消息" v-model="msg"> <button @click="sendMsg">发送</button> </div> </template> <style scoped> li p { text-align: left; } </style> pages-login.vue进入聊天室的页面<template> <div> <input type="text" placeholder="请输入用户名" v-model="userName"> <button @click="enterSocket">进入聊天室</button> </div> </template> <script setup> import { onMounted, ref } from "vue"; import { useRouter} from 'vue-router' const router=useRouter() const userName=ref('') onMounted(()=>{ userName.value=localStorage.getItem('username') // 简单的判断是否已进入聊天室 if(userName.value){ router.push('/home') return } }) // 进入聊天室 const enterSocket=()=>{ if(userName.value<6){ alert('用户名不小于6位') return } localStorage.setItem('username',userName.value) userName.value='' router.push('/home') } </script>4.router-index.js 由于框架是没有自带router的这里需要去pnpm i vue-router安装下import { createRouter, createWebHashHistory } from "vue-router"; import routes from "./router"; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router;router-router.jsimport login from "../pages/login.vue"; // 路由列表 let routes= [ { path: "/login", name: "login", component: login, }, { path: "/home", name: "home", component: () => import("../pages/home.vue"), children: [], }, ]; export default routes; 5.App.vue<template> <router-view></router-view> </template> 6.main.jsimport { createApp } from 'vue' import './style.css' import App from './App.vue' import router from "./router"; createApp(App).use(router).mount('#app') 6.在当前目录下新建server目录,用于node服务进入server目录生成package.json然后安装包在安装websocket的插件wx接着是node的目录如一下就完成在package.json中配置启动命令如index.js中写// 使用CommonJS require引入 // CommonJS 中的 require/exports 和 ES6 中的 import/export 区别 // CommonJS 模块是运行时加载,ES6 Modules 是编译时加载并输出接口。 // CommonJS 输出是值的拷贝;ES6 Modules输出的是值的引用,被输出模块的内部的改变会影响引用的改变。 // CommonJs 导入的模块路径可以是一个表达式,因为它使用的是 require() 方法,甚至这个表达式计算出来的内容是错误的路径,也可以通过编译到执行阶段再出错; // 而ES6 Modules 只能是字符串,并且路径不正确,编译阶段就会抛错。 // CommonJS this 指向当前模块,ES6 Modules this 指向 undefined // ES6 Modules 中没有这些顶层变量:arguments、require、module、exports、__filename、__dirname const Websocket=require('ws') ;((Ws)=>{ // 建立ws服务地址,这里跟前端都类似了唯一的区别是connection和message(连接和消息) const server=new Ws.Server({port:8000,host:"0.0.0.0"}) const init=()=>{ bindEvent() } function bindEvent(){ server.on('open',function(event){ server.send('OpenBarScanner') }) server.on('close',handelClose) server.on('error',handelError) server.on('connection',handelConnection) } function handelOpen(){ console.log('handelOpen') } function handelClose(){ console.log('handelClose') } function handelError(){ console.log('handelError') } // 连接时提示消息并发送到客户端 function handelConnection(ws){ console.log('WebSocket Connection') ws.on('message',handelMessage) } // 用于接收发送的消息 function handelMessage(msg){ server.clients.forEach((c)=>{ // 由于node发送到客户端的消息是Blob类型,这里需要用Buffer.form().toString()转化为utf8类型识别消息 c.send(Buffer.from(msg).toString('utf8')) }) } init() })(Websocket)
查看详情点赞2评论1收藏1浏览862023-06-15 15:25:03three学习路线(一)
安装three官网包引入three.js<script type="module"> // 现在浏览器支持ES6语法,自然包括import方式引入js文件 import * as THREE from './build/three.module.js'; </script>three.js三个基本概念:场景Scene、相机Camera、渲染器Renderer1.三维场景Scene你可以把三维场景Scene (opens new window)对象理解为虚拟的3D场景,用来表示模拟生活中的真实三维场景,或者说三维世界。创建3D场景对象Sceneconst scene = new THREE.Scene();2.物体形状:几何体Geometry Three.js提供了各种各样的几何体API,用来表示三维物体的几何形状{ 长方体(BoxGeomentry) 圆柱体(CylinderGeometry) 球体(SphereGeometry) 圆锥(ConeGeometry) 矩形平面(PlaneGeometry) 圆面图(CircleGeometry)}//创建一个长方体几何对象Geometryconst geometry = new THREE.BoxGeometry(100, 100, 100); 3.物体外观:材质Material如果你想定义物体的外观效果,比如颜色,就需要通过材质Material相关的API实现。threejs不同材质渲染效果不同,下面就以threejs最简单的网格基础材质MeshBasicMaterial (opens new window)为例给大家实现一个红色材质效果。{ 网格基础材质(MeshBasicMaterial) 网格漫反射材质(MeshLamberMaterial) 网格高光材质(MeshPhongMaterial) 物理材质(MeshStanderMaterial)(MeshPhysicalMaterial) 点材质(PointsMaterial) 线基础材质(LineBasicMaterial) 精灵材质(SpriteMaterial)}//创建一个材质对象Materialconst material = new THREE.MeshBasicMaterial({ color: 0xff0000,//0xff0000设置材质颜色为红色 }); 4.物体:网格模型Mesh实际生活中有各种各样的物体,在threejs中可以通过网格模型Mesh (opens new window)表示一个虚拟的物体,比如一个箱子、一个鼠标。// 两个参数分别为几何体geometry、材质materialconst mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh5.模型位置:position实际生活中,一个物体往往是有位置的,对于threejs而言也是一样的,你可以通过位置属性position定义网格模型Mesh在三维场景Scene中的位置。const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh //设置网格模型在三维空间中的位置坐标,默认是坐标原点 mesh.position.set(0,10,0);6.add()方法在threejs中你创建了一个表示物体的虚拟对象Mesh,需要通过.add()方法,把网格模型mesh添加到三维场景scene中。scene.add(mesh); 代码小结<script type="module"> // es6引入three.js import * as THREE from "../build/three.module.js"; // 创建场景 const scene = new THREE.Scene(); // 创建物体形状(几何体) const geomeyry = new THREE.BoxGeometry(100, 100, 100); // 添加物体外观(材质) const material = new THREE.MeshBasicMaterial({ color: 0xff0000, }); // 创建网格模型 把形状外观放入模型中 const mesh = new THREE.Mesh(geomeyry, material); // 设置模型所在场景(Scene)中的位置 mesh.position.set(0, 10, 0); // 把模型添加到场景(Scene)中 scene.add(mesh); </script>
查看详情点赞1评论1收藏浏览622023-03-07 15:11:28input输入框限制正则
只能输入数字:<el-input v-model.number="num" oninput="value=value.replace(/[^\d]/g,'')" />禁止输入空格:<el-input v-model="name" @input="name = name.replace(/[ ]/g, '')" />禁止输入中文空格:<el-input v-model="code" @input="code = code.replace(/[\u4e00-\u9fa5]|[ ]/g, '')" />1.限制input输入框只能输入大小写字母、数字、下划线的正则表达式:<el-input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 2.限制input输入框只能输入小写字母、数字、下划线的正则表达式:<el-input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> 3…限制input输入框只能输入数字和点的正则表达式:<el-input type="text" onkeyup="value=value.replace(/[^\d.]/g,'')">4.限制input输入框只能输入中文的正则表达式:<el-input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"> 5.限制input输入框只能输入数字的正则表达式:<el-input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')"> 6.限制input输入框只能输入英文的正则表达式:<el-input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">7.限制input输入框只能输入中文、数字、英文的正则表达式:<el-input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"> 8.限制input输入框只能输入数字和字母的正则表达式:<el-inputt onKeyUp="value=value.replace(/[\W]/g,'')"> 9.限制input输入框除了英文的标点符号以外,其他的都可以中文,英文字母,数字,中文标点的正则表达式:<el-input type="text" onkeyup="this.value=this.value.replace(/^[^!@#$%^&*()-=+]/g,'')">10.限制input输入框只能输入数字代码(小数点也不能输入)的正则表达式:<el-input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">11.限制input输入框只能输入数字,能输小数点.的正则表达式:<el-input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"><el-input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">或者<el-input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">12限制input输入框只能输入字母和汉字的正则表达式:<el-input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">13.限制input输入框只能输入英文字母和数字,不能输入中文的正则表达式:<el-input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">14限制input输入框只能输入数字和英文的正则表达式:<el-input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">15限制input输入框小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号的正则表达式:<el-input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">16.限制input输入框小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:的正则表达式:<el-input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">17.不可输入中文<el-input onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')">18.不可输入空格<el-input onkeyup="onkeyup="value = value.replace(/\s+/g, '')">
查看详情点赞1评论收藏1浏览262023-03-27 11:33:07JS屏蔽UC浏览器网页垃圾广告问题
在前端开发中,特别是手机端网页时候。经常会在手机网页底部自动加上类似于上面这种垃圾广告。这样会应该我们的站点,让人误以为是广告,所以我们要在代码中进行处理。这种情况基本上UC浏览器向我们页面插入了一段iframe代码。处理的方式有很多,下面是我们常用的一种方式,亲测可用。// 清除广告 var del_times = 0, deTimer = null; function adGo() { var iframe = document.getElementsByTagName("iframe")[0]; if (iframe) { var bodyNode = { tagName: "" }, iframeParent, targetNode = iframe.parentNode; while (bodyNode.tagName != "BODY") { bodyNode = targetNode; if (bodyNode.tagName != "BODY") { iframeParent = targetNode; targetNode = targetNode.parentNode; } } if (iframeParent) //如果iframe有父类 bodyNode.removeChild(iframeParent); else bodyNode.removeChild(iframe); } del_times++; if (del_times > 10) window.clearInterval(deTimer); } //抢先 删除 嵌入广告 (function () { adGo(); })(); deTimer = self.setInterval(adGo, 200); ///新版 首先需要在body结束之前插入一行HTML代码: <div id="lastOne"></div> 使用这个代码的目的是为了找到页面的最后一行标识。这行代码以后出现的代码都会被jQury删除掉。 UC广告使用了滚动触发的,所以我们需要这个写: $(document).scroll(function () { $("#lastOne").nextAll().remove(); });
查看详情点赞1评论收藏浏览622023-03-30 13:54:54JS阻止用户重复点击(防抖&节流)
如图所示:我们在前端研发过程中,在表单提交或者用户其他点击行为过程中,为了避免用户重复点击,我们有必要在这些可点击地方加上防抖操作 。一方面阻止用户重复请求后端接口,另一方面也提高了用户的体验性。let clickNum = 0; // 表单提交 $('.submit_btn').on('click', function () { if (clickNum == 0) { clickNum = 1; setTimeout(function () { clickNum = 0 }, 3000); //这里写需要执行的函数 }else{ layer.msg('请勿频繁操作!'); } })
查看详情点赞1评论收藏浏览622023-03-30 14:02:56工作小技巧集锦
1、wap端滑动时侧边栏隐藏//aside需添加transition属性 $('body').on('touchmove', function (event) { $('aside').css('right','-1rem') }) $('body').on('touchend', function (event) { $('aside').css('right','0') })2、less 循环背景图.Loop(@index) when(@index<=8) { // 执行内容 // 类名参数要加大括号@{index} // 根据index获取对应的某个值 extract(数组名, 对应的序号) &:nth-child(@{index}) { background-image: url("../images/aj_bg0@{index}.png"); } //递归调用 达到循环目的 .Loop(@index+1); } // 调用循环 .Loop(0);3、vscode正则匹配</span>(\s*(?=\r?))<span> ———— 匹配标签间的所有空白字符 (?<!link rel="stylesheet") href="([\w\W]+?)" ———— 匹配所有href=""的内容,除了link rel="stylesheet"4、css限制显示行数,超出部分加上...chrome.textRow(@row) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @row; //需要显示时文本行数 overflow: hidden; }ie兼容 // 处理多行文本超出部分隐藏 function wordLimit(cName, wordLength) { var cName = document.getElementsByClassName(cName); for (var i = 0; i < cName.length; i++) { var nowHtml = cName[i].innerHTML; var nowLength = cName[i].innerHTML.length; if ( nowLength > wordLength) { cName[i].innerHTML = nowHtml.substr(0, wordLength) + '…'; } } };5、样式重置小问题移动端样式重置需要加上font-size,不然会有默认字体大小*{ font-size: 0.24rem }6、axios的post请求axios的post请求,默认是以application/x-www-form-urlencoded发送的,而一般接口接收都只能接收application/json,因此传输的data数据需要通过qs.stringify进行转换(前提是需先安装qs并引入)axios.create({ method: 'POST', url: '***', headers: { 'content-type': 'application/x-www-form-urlencoded' }, data: qs.stringify(data) })7、css竖排文字兼容问题准备做一个数字在框里自增的效果,需要用到文字竖排显示,原本用的writing-mode:lr-tb,实践发现存在兼容性问题,然后设置宽度文字并没有自动换行,因此只能用笨办法,内容里添加br标签达到目的8、通过正则将内容换成*,保留头和尾str.replace(/^(.).*(.)$/, '$1***$2')9、axios携带cookie的方法 封装的js里添加axios.defaults.withCredentials = true 这个属性,这样发请求时会自动携带cookie,但是需要后端在接口配置上允许携带cookie才能生效10、合理使用props中的值的方法如果props中的值涉及到多次更改,而调用他的值又是个对象的话,应该把对象放到computed中,否则没有办法实时监听props: { value: { type: String }, code: { type: String, default: 'cform_picture_control' }, ownId: { type: String, default: 'f3e28bd96ea2b32b361bd3e4690a1f6' }, selectType: { type: String, default: 'primary' }, portrait: { type: Boolean, default: false }, preview: { type: Boolean, default: true }, deleted: { type: Boolean, default: false }, limit: { type: Number, default: 10 }, exclude: { type: String, default: '' } }, //放到data中会监听不到后面的变化 data() { return { attrs:{ code: this.code, ownId: this.ownId, // 业务id selectType: this.selectType, portrait: this.portrait, // extendCode: '', //autoUpload: false, //preview: true, download: true, dragSort: true, limit: Number(this.limit), exclude: this.exclude, preview: this.preview, deleted: this.deleted } } }, // computed中才会实时监听变化 computed: { attrs() { return { code: this.code, ownId: this.ownId, // 业务id selectType: this.selectType, portrait: this.portrait, // extendCode: '', //autoUpload: false, //preview: true, download: true, dragSort: true, limit: Number(this.limit), exclude: this.exclude, preview: this.preview, deleted: this.deleted }; } },
查看详情点赞1评论收藏浏览922023-05-04 16:03:05JS 生成二维码
JS生成二维码,其实很容易。下面我们来测试一下,一些简单的二维码就用JS生成。我们用一个生成二维码的库: https://github.com/SumiMakito/Awesome-qr.js 在网上翻了一些资料,这个库是没有什么缺点的,当然也可以尝试用其他生成二维码的库。html引入Awesome-qr库:<script src='./qr/dist/awesome-qr.js' type="text/javascript"></script> <script src="http://www.alingfeng.cn/js/jquery.min.js"></script>生成二维码:<img id="qrcodeimg"/ > <script> var creatqrcode = function (text, logo, background) { // 二维码生成参数 var text = "http://www.alingfeng.cn"; var size = 200; var colorDark = "#000000"; var margin = 9 var background = background || "#ffffff"; var logo = logo || ""; $("#qrcodeimg").css({width:size+"px",height:size+"px"}) new AwesomeQR.AwesomeQR({ text: text, // 内容 size: size, // 二维码大小 margin: margin, // 二维码白边大小 colorDark:colorDark, // 二维码颜色 colorLight: "rgba(159,255,255,0)", // 二维码背景颜色 logoImage : logo, // 二维码中间logo logoScale : 0.3, // 二维码中间logo大小 logoCornerRadius : 0, // 二维码中间logo圆角 }).draw() .then((dataURL) => { $("#qrcodeimg").attr("src", dataURL) }) .catch((err) => { console.error(err); }); } $(function(){ // 初始化生成二维码 creatqrcode("http://www.alingfeng.cn") }) </script>然后生成二维码试试:
查看详情点赞1评论收藏浏览1032023-06-17 10:56:44JS屏蔽鼠标右键审查元素,禁用键盘F12功能,或者其他键盘功能(详情如下)
屏蔽鼠标右键点击审查元素HTML方法:body标签上面加属性<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false"> </body>JS方法:document.onkeydown = function(){ if(window.event && window.event.keyCode == 123) { event.keyCode=0; event.returnValue=false; } if(window.event && window.event.keyCode == 13) { window.event.keyCode = 505; } if(window.event && window.event.keyCode == 8) { window.event.returnValue=false; } }禁用键盘F12事件,及其其他键盘事件(F1-F12,Ctrl+s,Ctrl+P)等:document.onkeydown = function () { if (window.event && window.event.keyCode == 123) { event.keyCode = 0; event.returnValue = false; } if (window.event && window.event.keyCode == 13) { window.event.keyCode = 505; } // 禁止通过F12打开控制台 let e = event || window.event || arguments.callee.caller.arguments[0]; //禁用F1-F12 if (event.keyCode === 112) { event.preventDefault() event.returnValue = false } if (event.keyCode === 113) { event.preventDefault() event.returnValue = false } if (event.keyCode === 114) { event.preventDefault() event.returnValue = false } if (event.keyCode === 115) { event.preventDefault() event.returnValue = false } if (event.keyCode === 116) { // event.preventDefault() // event.returnValue = false } if (event.keyCode === 117) { event.preventDefault() event.returnValue = false } if (event.keyCode === 118) { event.preventDefault() event.returnValue = false } if (event.keyCode === 119) { event.preventDefault() event.returnValue = false } if (event.keyCode === 120) { event.preventDefault() event.returnValue = false } if (event.keyCode === 121) { event.preventDefault() event.returnValue = false } if (event.keyCode === 122) { // event.preventDefault() // event.returnValue = false } if (event.keyCode === 123) { event.preventDefault() event.returnValue = false } }
查看详情点赞1评论收藏浏览1232024-02-29 14:27:41JS中常见的几种错误
1.1、SyntaxError(语法错误)解析代码时发生的语法错误var 1a; //Uncaught SyntaxError: Invalid or unexpected token 变量名错误console.log 'hello'); //Uncaught SyntaxError: Unexpected string 缺少括号1.2、ReferenceError(引用错误)console.log(a); //Uncaught ReferenceError: a is not defined 引用了一个不存在的变量console.log()= 1; //Uncaught ReferenceError: Invalid left-hand side in assignment 将变量赋值给一个无法被赋值的对象1.3、RangeError(范围错误)var a = new Array(-1); //Uncaught RangeError: Invalid array length 超出有效范围1.4、TypeError(类型错误)变量或参数不是预期类型,比如,对字符串、布尔值、数值等原始类型的值使用new命令,就会抛出这种错误,因为new命令的参数应该是一个构造函数。var a = new 123; //Uncaught TypeError: 123 is not a function调用对象不存在的方法var a;a.aa(); //Uncaught TypeError: Cannot read property 'aa' of undefined1.5、URLError(URL错误)与url相关函数参数不正确,主要是encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。decodeURI('%2') //Uncaught URIError: URI malformed1.6、EvalError(eval错误)eval函数没有被正确执行2、手动抛出错误以上这6种派生错误,连同原始的Error对象,都是构造函数。开发者可以使用它们,人为生成错误对象的实例。throw new Error("出错了!"); throw new RangeError("出错了,变量超出有效范围!"); throw new TypeError("出错了,变量类型无效!");上面代码表示新建错误对象的实例,实质就是手动抛出错误。可以看到,错误对象的构造函数接受一个参数,代表错误提示信息(message)。
查看详情点赞评论收藏浏览432023-02-28 10:19:11