奎奎网络发布的文章 - 奎奎博客 - 每天更新资源,奎奎网络,快手奎奎

登录 / 注册

标签搜索

奎奎网络

累计撰写 96 篇文章
累计收到 31 条评论

搜索到 96 篇与的结果

2022-09-07
JS正则限制只能输入数字、或带小数点的数字，并且小数后面限制多少位 JS正则限制只能输入数字、或带小数点的数字，并且小数后面限制多少位length 代表如果输入含小数位的时候，小数位的个数const length = 2 const reg = new RegExp(`^\\d+(\\.\\d{1,${length}})?$`)
- 2022年09月07日
- 1,318 阅读
- 0 评论
- 63 点赞
2022-09-06
大疆无人机推出的“在线无人机体验网站” 大疆无人机推出的“在线无人机体验网站”在线地址 https://start.dji.com/
- 2022年09月06日
- 5,464 阅读
- 0 评论
- 134 点赞
2022-09-05
禁止F12元素审查很多时候我们辛辛苦苦弄的代码被很多人按一个F12直接白嫖走了，感觉自己的付出被白嫖是不是非常的伤心、郁闷，甚至是气愤、愤怒。删除线效果下面和大家介绍一种方式。直接在页脚文件foot.php或者footer.php最下方放入以下代码：<script> function fuckyou(){ window.close(); //关闭当前窗口(防抽) window.location="about:blank"; //将当前窗口跳转置空白页 } function click(e) { if (document.all) { if (event.button==2||event.button==3) { alert("禁止恶意拿代码的"); oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { fuckyou(); document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; document.oncontextmenu = new Function("return false;") document.onkeydown =document.onkeyup = document.onkeypress=function(){ if(window.event.keyCode == 123) { fuckyou(); window.event.returnValue=false; return(false); } } </script>
- 2022年09月05日
- 7,450 阅读
- 0 评论
- 45 点赞
2022-09-03
Css设置单行文本多行文本溢出隐藏并以省略号显示单行文本溢出white-space: nowrap; text-overflow: ellipsis; overflow: hidden;两行溢出display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
- 2022年09月03日
- 2,239 阅读
- 0 评论
- 66 点赞
2022-09-03
为你的网站添加点击散开特效将以下代码复制到你网站最底部即可实现<canvas id="fireworks" style="position: fixed; left: 0px; top: 0px; pointer-events: none; z-index: 2147483647; width: 1920px; height: 151px;" width="3840" height="302"></canvas> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script> <script type="text/javascript"> function updateCoords(e) { pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top } function setParticuleDirection(e) { var t = anime.random(0, 360) * Math.PI / 180, a = anime.random(50, 180), n = [-1, 1][anime.random(0, 1)] * a; return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t) } } function createParticule(e, t) { var a = {}; return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos = setParticuleDirection(a), a.draw = function() { ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill() }, a } function createCircle(e, t) { var a = {}; return a.x = e, a.y = t, a.color = "#F00", a.radius = .1, a.alpha = .5, a.lineWidth = 6, a.draw = function() { ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth = a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1 }, a } function renderParticule(e) { for (var t = 0; t < e.animatables.length; t++) e.animatables[t].target.draw() } function animateParticules(e, t) { for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) n.push(createParticule(e, t)); anime.timeline().add({ targets: n, x: function(e) { return e.endPos.x }, y: function(e) { return e.endPos.y }, radius: .1, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule }).add({ targets: a, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: "linear", duration: anime.random(600, 800) }, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, offset: 0 }) } function debounce(fn, delay) { var timer return function() { var context = this var args = arguments clearTimeout(timer) timer = setTimeout(function() { fn.apply(context, args) }, delay) } } var canvasEl = document.querySelector("#fireworks"); if (canvasEl) { var ctx = canvasEl.getContext("2d"), numberOfParticules = 30, pointerX = 0, pointerY = 0, tap = "mousedown", colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"], setCanvasSize = debounce(function() { canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width = window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2) }, 500), render = anime({ duration: 1 / 0, update: function() { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height) } }); document.addEventListener(tap, function(e) { "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY)) }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1) } </script>
- 2022年09月03日
- 5,254 阅读
- 0 评论
- 33 点赞
2022-09-02
JS唤醒win10消息通知 // 判断浏览器是否支持唤醒 if (window.Notification) { let popNotice = () => { if (!Notification.permission === 'granted') return const notification = new Notification('阿巴阿巴', { body: '提示提示提示' }) // 点击通知的回调函数 notification.onclick = function () { window.open('https://baidu.com') notification.close() } } /* 授权过通知 */ if (Notification.permission === 'granted') { popNotice() } else { /* 未授权，先询问授权 */ Notification.requestPermission(function (permission) { popNotice() }) } }{callout color="#29bd00"}如果是WIN10系统的话，可以直接将上面代码复制到F12控制台运行{/callout}
- 2022年09月02日
- 3,570 阅读
- 0 评论
- 43 点赞
2022-09-01
原生JS实现一个验证码功能定义一个用于显示验证码的canvas<canvas width="100" height="40"></canvas>生成JS的业务逻辑// 获取canvas let canvas = document.querySelector("canvas") let context = canvas.getContext("2d"); // 定义初始化验证码内容 let nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R','S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x','y', 'z']; drawCode() // 绘制验证码 function drawCode() { context.beginPath() /* 绘制背景色 */ context.fillStyle = "cornflowerblue"; context.fillRect(0, 0, canvas.width, canvas.height) /* 绘制验证码 */ context.fillStyle = "white"; context.font = "25px Arial"; let rand = [], x = [], y = [] for (let i = 0; i < 5; i++) { rand[i] = nums[Math.floor(Math.random() * nums.length)] x[i] = i * 16 + 10; y[i] = Math.random() * 20 + 20; context.fillText(rand[i], x[i], y[i]); } /* rand就是生成后的结果，后面用来判断验证码输入框是否与该值相等 */ console.log(rand); //画3条随机线 for (let i = 0; i < 3; i++) { drawline(canvas, context); } // 画30个随机点 for (let i = 0; i < 30; i++) { drawDot(canvas, context); } } // 随机线 function drawline(canvas, context) { //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数 context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数 context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); context.lineWidth = 0.5; context.strokeStyle = 'rgba(50,50,50,0.3)'; context.stroke(); } // 随机点 function drawDot(canvas, context) { let px = Math.floor(Math.random() * canvas.width); let py = Math.floor(Math.random() * canvas.height); context.moveTo(px, py); context.lineTo(px + 1, py + 1); context.lineWidth = 0.2; context.stroke(); }
- 2022年09月01日
- 3,746 阅读
- 0 评论
- 44 点赞
2022-08-31
Electron教程 Electron+Vue跨平台桌面软件开发教程-2022年重录（大地老师） Electron教程 Electron+Vue跨平台桌面软件开发教程-2022年重录（大地老师）
- 2022年08月31日
- 1,754 阅读
- 0 评论
- 32 点赞
2022-08-30
iPhone 苹果手机充电提示音怎么设置? iPhone 苹果手机充电提示音怎么设置?
- 2022年08月30日
- 2,479 阅读
- 0 评论
- 65 点赞
2022-08-29
原生JS模拟虚拟dom，虚拟dom转真实dom <div id="root" class="aaa"> <div class="title">11</div> <div class="title">222</div> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> <script type="text/javascript"> class VNode { constructor(name, attrs, value, type) { this.name = name this.attrs = attrs this.value = value this.type = type this.children = [] } addChildren(node) { this.children.push(node) } } function create(node) { let _vnode = null if (node.nodeType === 1) { const attributes = [...node.attributes] const attrs = attributes.reduce((prev, curr) => { prev[curr.name] = curr.value return prev }, {}); _vnode = new VNode(node.nodeName.toLowerCase(), attrs, null, node.nodeType) for (let item of node.childNodes) { _vnode.addChildren(create(item)) } } else if (node.nodeType === 3) { _vnode = new VNode(node.nodeName.toLowerCase(), null, node.nodeValue, node.nodeType) } return _vnode } let vnode = create(document.querySelector("#root")) console.log(vnode); function parse(node) { let nodeEl = null if (node.type === 1) { nodeEl = document.createElement(node.name) for (let key in node.attrs) nodeEl.setAttribute(key, node.attrs[key]) node.children.forEach(item => { nodeEl.appendChild(parse(item)) }); } else { nodeEl = document.createTextNode(node.value) } return nodeEl } let dom = parse(vnode) console.log(dom); </script>
- 2022年08月29日
- 2,356 阅读
- 0 评论
- 130 点赞
2022-08-28
Vue底层判断标签的性能优化方法在vue中，如果写div、span等正常的html标签，vue会解析成传统的html标签，但当写不是这些标签的时候，vue会认为他是一个组件，例如：<Custom></Custom>。是如何做到这种判断的呢，首先自己来实现一个这样的判断const tags = 'div,span,img,a'.split(",") function checkTag(tag) { return tags.some(item => item === tag) } console.log(checkTag('Custom')); // false console.log(checkTag('div')); // true console.log(checkTag('a')); // true这里的实现方案有很多，可以用for、some、forEach等，但是都是离不开循环，思考这样的一个问题，传入一个a，a在字符串最后一个位置，所以会循环4次来判断是否包含a，如果页面上的标签极多，甚至会有上万次的循环再来查看Vue实现这个的方式，大致源码如下const tags = 'div,span,img,a' function makeMap(str) { var map = Object.create(null); var list = str.split(','); for (var i = 0; i < list.length; i++) { map[list[i]] = true; } return function (val) { return map[val]; } } const isHtmlTag = makeMap(tags) isHtmlTag('div') isHtmlTag('Custom') isHtmlTag('a')这里可以看出，实现出一个柯里化函数，并且也是一个闭包状态。此时，在第一次调用时，会循环一次，后续不论在去判断什么标签，都不会再去循环，因为第一次的循环结果利用闭包已经存在了内存里，这就是闭包能带来的性能优化
- 2022年08月28日
- 2,134 阅读
- 0 评论
- 151 点赞
2022-08-27
ECharts社区合集整理 ECharts社区合集整理
- 2022年08月27日
- 2,832 阅读
- 0 评论
- 56 点赞
2022-08-27
人生大事1080P在线观看随时失效人生大事1080P在线观看随时失效
- 2022年08月27日
- 1,567 阅读
- 1 评论
- 127 点赞
2022-08-27
一些实用的函数 /** * @description: 校验身份证 * @param {*} * @return {*} */ export const validateIDCard = value => /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value); /** * @description: 校验支付宝账号 * @param {*} * @return {*} */ export const validateAlipay = value => /^1\d{10}$|^[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20}$/.test(value); /** * @description: 校验银行卡 * @param {*} * @return {*} */ export const validateBankCode = value => /^\d{13,19}$/.test(value); /** * @description: 校验手机号 * @param {*} * @return {*} */ export const validatePhone = value => /^1\d{10}$/.test(value); /** * @description: 函数节流 * @param {*} * @return {*} */ export const throttle = function (fn, delay = 1000) { let prev = 0; return function () { const now = Date.now(); if (now - prev > delay) { fn.apply(this, arguments); prev = Date.now(); } } } /** * @description: 获取随机字符串 * @param {*} * @return {*} */ export const randomString = () => Math.random().toString(36).substr(2); /** * @description: 将 BASE64 转换文件 * @param {*} * @return {*} */ export const dataURLtoFile = (dataurl, filename) => { const arr = dataurl.split(','); const mime = arr[0].match(/:(.*?);/)[1]; if (!filename) filename = `${Date.parse(new Date())}.jpg`; const bstr = window.atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); } /** * @description: 压缩图片 * @param {*} * @return {*} */ export const compressImg = file => { const fileSize = parseFloat(Number.parseInt(file.size, 10) / 1024 / 1024).toFixed(2); const reader = new FileReader(); reader.readAsDataURL(file); return new Promise((resolve) => { reader.onload = e => { const img = new Image(); img.src = e.target.result; img.onload = () => { const w = img.width; const h = img.height; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); let base64; canvas.setAttribute('width', w); canvas.setAttribute('height', h); ctx.drawImage(img, 0, 0, w, h); if (fileSize <= 1) { base64 = canvas.toDataURL(file.type, 1); } else if (fileSize <= 3) { base64 = canvas.toDataURL(file.type, 0.8); } else if (fileSize <= 5) { base64 = canvas.toDataURL(file.type, 0.5); } else { base64 = canvas.toDataURL(file.type, 0.1); } let fileName = file.name; fileName = fileName.replace(/^(.+)\.(.+)$/, (fullName, name, suffix) => name + Math.floor(Math.random() * (9999 - 1000) + 1000) + '.' + suffix); resolve(dataURLtoFile(base64, fileName)); }; }; }); }
- 2022年08月27日
- 5,349 阅读
- 0 评论
- 135 点赞
2022-08-18
谷歌插件分享 - 前端必备 Web 开发者助手 FeHelper 插件介绍插件支持 Chrome、Firefox、MS-Edge 浏览器，内部工具包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、随机密码生成、Markdown、网页油猴、网页取色器、脑图(Xmind)等贴心工具等插件预览官方地址https://www.baidufe.com/fehelper/index/index.html扩展功能FeHelper功能会逐渐增加，所有新的工具会自动出现在FH应用市场，查看介绍，可以直接去官网： https://www.baidufe.com/fehelper/index/index.htmlJSON自动美化（页面自动检测并格式化）JSON手动美化（粘贴文本、手动格式化）JSON比对工具（支持左右两个JSON片段进行键值对比较）字符串编解码（Unicode/UTF8/Base64/MD5）代码美化工具（HTML/CSS/JS/XML/SQL）代码压缩工具（HTML/CSS/JS）二维码生成器（支持当前页面、图片、链接、选中的文字生成QrCode）二维码解码器（支持网页二维码右键解码）简易Postman（Api接口测试，模拟HEAD/GET/POST方式）网页滚动截屏（将当前整个网页转为图片并保存）Markdown转换（支持Markdown与HTML的互转）页面取色工具（滑动鼠标随意取色）Js正则表达式（正则测试、常用正则列表）时间(戳)转换（Unix戳与本地时间的互转）图片Base64（任意图片转DataURI格式）随机密码生成（任意字符、任意长度、随机生成）多维小工具集（进制转换、RGB/HEX颜色转换、Crontab、还款计算器等）网页油猴工具（网页特效、网页定制、脚本注入、自动刷新等）我的便签笔记（便签笔记，支持导出）便捷思维导图（网页版的脑图工具）... 更多工具，请去官网查看：https://www.baidufe.com/fehelper/index/index.html开源仓库https://github.com/zxlie/FeHelper
- 2022年08月18日
- 7,273 阅读
- 0 评论
- 511 点赞