随笔分类 - 前端笔记
沉淀前端的笔记
摘要：js for (let i = 2; i <= 100; i++) { let iszs = true for (let j = 2; j < i; j++) { if (i % j 0) { iszs = false break } } if (iszs) { zs.push(i) } } con
阅读全文
摘要：nodejs 普通文本转base64文本 const base64 = Buffer.from('你好啊，我叫herry菌', 'utf8').toString('base64'); console.log(base64) nodejs base64文本转普通文本 const text = Buff
阅读全文
摘要：nodejs 图片加水印 var images = require('images'); //等待加水印的图片 var sourceImg = images("./image.png"); //水印图片 宽高最大为200px var watermarkImg = images('./biglogo.
阅读全文
摘要：浏览器的机制如此，在iframe导航变化后手动点击浏览器的后退按钮也依然只是后退iframe中的导航。 有一种解决方案是不要修改iframe.src，而是删除旧iframe元素，新建一个iframe元素并替换它，这样不会产生history。 直接createElement，替换原来的iframe。
阅读全文
摘要：代码： // 禁用双指放大 document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault() } }, {
阅读全文
摘要：代码：array（1个数组） size（按每多少个元素进行拆分） function splitArray(array, size) { let data = []; for (let i = 0; i < array.length; i += size) { data.push(array.slic
阅读全文
摘要：返回2个日期之间的所有日期数组 function getAllDates(start, end) { let dateList = []; const startTime = getDate(start); const endTime = getDate(end); while ((endTime.
阅读全文
摘要：双端队列：队列的两端都可以增加和删除。可先进先出，或后进先出。比如火车站验票，可正常排队，但如果比较紧急时可以跑到最前面去。 /** * 双端队列 */ class Deque { #count = 0;//队列最大数量 #lowestCount = 0;//目前第一个元素的下标 #items =
阅读全文
摘要：队列：先进先出。类似做核酸，只能按顺序排队，不能插队。 队列的实现 和栈的实现相似，但是这里使用对象的方式，对象的key是数字的实现，类似数组。 /** * 队列 */ class Queue { #count = 0; //队列最大数量 #lowestCount = 0; //目前第一个元素的下标
阅读全文
摘要：栈：后进先出。比如一叠书、一叠衣服。 先是栈结构的封装，使用es6的方式。 #items为栈结构 #表示类的私有属性，外部不能直接访问和修改。 push 压栈 pop 出栈 peek 查看栈顶 isEmpty 栈是否为空 size 栈内元素个数 toString 字符串形式返回栈内容 /** * 栈
阅读全文
摘要：<!-- * @Description: * @Version: 1.0 * @Author: 努力才能逃离 * @Date: 2022-08-02 10:01:51 * @LastEditors: 努力才能逃离 * @LastEditTime: 2022-08-03 10:48:33 --> <h
阅读全文
摘要：pannellum初次探索案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
阅读全文
摘要：gitpod，一款在线开发调试工具，使用它你可以在网页上直接开发软件项目了。 比如你的项目仓库在github上，你可以直接在网址的前面添加gitpod.io/#，然后回车就能在网页上使用vscode打开这个项目了。 打开的效果： 可以安装插件和运行插件 运行成功后会开一个端口，这个就是调试预览的效果
阅读全文
摘要：demo： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <input id="file" type="file" /><br> <but
阅读全文
摘要：解析B站视频： 通过B站视频的bvid可以通过查看网页源代码，拿到aid和cid。 通过aid和cid访问b站接口： https://api.bilibili.com/x/player/playurl?avid=AID&cid=CID&qn=1&type=&otype=json&platform=h
阅读全文
摘要：这个模块是一个公众号的模块，名字叫“帮你看着”。 原本这个公众号是做股票监控提醒的，我也没炒股。因为接口支持写入任何内容，所以可以有其他的用处。比如做成天气预报定时提醒。 我们去npmjs中看下这个模块的详情。 可以看出，在使用之前，需要先关注一下一个用于接收提醒的公众号， 扫码，然后获得生成的账号
阅读全文
摘要：backdrop-filter: blur(5px); 将这个元素覆盖的区域下方进行模糊 filter: blur(5px); 这个元素内部模糊了，底部反而没有模糊 filter 当前和后代元素都继承该属性 backdrop-filter 该层底部的元素模糊 有兼容安卓 -webkit-filter
阅读全文
摘要：效果：（左边是canvas绘制的视频，右边是经过滤镜处理后的canvas视频） 几个关键点： requestAnimationFrame 用于重复绘制图像，形成动态视频 ctx.drawImage 在canvas中绘制图像（支持跨域） getImageData 获取canvas内的图像数据 putI
阅读全文
摘要：获取支持的设备列表 (async () => { //获取设备列表 let devices = await navigator.mediaDevices.enumerateDevices(); console.log(devices); })(); 获取到PC/移动端的支持设备： audioinpu
阅读全文
