JavaScript
tianmeng1999
这个作者很懒,什么都没留下…
展开
-
根据音频绘制频谱
注意:在有些设备(iphone7)上,录音和播放不能同时进行, 在一些iphone上 同时进行回导致 播放声音音量较小。注意:在有些设备上,原创 2023-11-20 14:05:24 · 772 阅读 · 1 评论 -
音频录制实现 绘制频谱
封装 loadDevices.js。原创 2023-11-20 14:04:27 · 836 阅读 · 0 评论 -
接口返回的二进制音频数据转url
【代码】接口返回的二进制音频数据转url。原创 2023-11-16 17:36:31 · 275 阅读 · 0 评论 -
vue 数字处理规则 正整数 小数长度限制 整数长度限制
文章目录规则使用7位数字支持小数点后两位7位整数规则// 数字处理规则 小数位inputHandle(value, options) { let { obj, // 对象 key, // 修改的值对应key decimalsLen = 2, // 小数位长度 0 正整数 intLen = 0 // 整数位长度限制 0 不限制 } = options let dIndex = value.indexOf('.') // 非原创 2021-09-09 16:15:49 · 1471 阅读 · 0 评论 -
toLocaleString千分位
如果是超大的数,可能是会有问题的。function formatMoney(num){ return (+num).toLocaleString("en-US");}console.log(formatMoney(123456789)); // 123,456,789console.log(formatMoney(6781)) // 6,781console.log(formatMoney(5)) // 5MDN 示例...原创 2021-08-05 10:45:35 · 396 阅读 · 0 评论 -
生成UUID
基于URL.createObjectURLfunction genUUID() { const url = URL.createObjectURL(new Blob([])); const uuid = url.substring(url.lastIndexOf('/')+ 1); URL.revokeObjectURL(url); // 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象 return uuid;}ge原创 2021-08-05 10:41:24 · 246 阅读 · 0 评论 -
浏览器内置 base64编码和解码 btoa atob
function utf8_to_b64( str ) { return window.btoa(unescape(encodeURIComponent( str )));}function b64_to_utf8( str ) { return decodeURIComponent(escape(window.atob( str )));}原创 2021-08-05 10:32:42 · 444 阅读 · 0 评论 -
js 桌面通知
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-08-05 10:06:39 · 400 阅读 · 0 评论 -
js 保证精度实现 乘法
保证精度实现 乘法function multiply(a, b) { function getSecimalsLength(num){ var str = num + '' var end = str.split('.')[1] return end ? end.length : 0 } // 判断2个参数是否有小数 比较小数长度 获取长的 var len = Math.max(getSecimalsLength(a),get原创 2021-06-25 18:07:21 · 948 阅读 · 0 评论 -
手写 flat 数组降纬
/** * 数组扁平化 * @param {Number} depth 降维层级 infinty 降到一维数组 */Array.prototype.myFlat = function(depth=1){ let result = [], deep = -1; // 扁平层数 function _flat(arr){ deep++; arr.forEach((item)=>{ if(Array.isArray(item)){原创 2021-05-31 16:57:27 · 123 阅读 · 4 评论 -
手写 reduce
/** * reduce方法 * @param {*} fu 回调函数 * @param {*} initVal 初始值 */Array.prototype.myReduce = function(fu, initVal){ let prev = initVal == undefined ? this[0] : initVal; let i = initVal == undefined ? 1 : 0; for(; i< this.length; i++){原创 2021-05-31 16:54:45 · 137 阅读 · 0 评论 -
div实现textarea
可编辑 contenteditable=true可改变大小 resize:auto;overflow:auto;placeholder 添加placeholder属性,通过css选择器获取属性的值,添加到伪类中监听文本内容是否为空 是否显示placeholder实现过程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv.原创 2021-05-31 11:40:55 · 584 阅读 · 0 评论 -
手写 功能引导实现
文章目录功能实现实现效果一实现效果二实现过程功能实现实现效果一效果配置// 首屏引导function loadHomeLead(){ // 是否已经加载过了 const is = localStorage.getItem('loadHomeLead') if(is) return const step1pos = document.querySelectorAll('.info')[1].getBoundingClientRect() const原创 2021-05-14 13:59:19 · 184 阅读 · 0 评论 -
js日期格式化 小程序 ios Date对象(好坑(:)
/** 获取指定日期的前n天 * date 当前日期 * day 前 或者 后 的日期 单位/天 * format 格式 */export function getNextDate(date, day=-1, format="yyyy-MM-dd") { return new Date(new Date(date).getTime() + day*24*60*60*1000).format(format);;};// 日期格式化Date.prototype.format = fun原创 2021-03-18 10:02:48 · 368 阅读 · 0 评论 -
生成 随机名称
/** * 生成文件名称 * @param {String} suffix 后缀 */export function getFileName(suffix){ return randomNumber() + '.' + suffix}// 生成随机数export function randomNumber(){ function S4() { return (((1+Math.random())*0x10000)|0).toString(16).substring(原创 2021-03-18 09:59:44 · 365 阅读 · 0 评论 -
url变化触发popstate hasn变化触发hashChange
文章目录url变化触发hasn变化触发url变化触发window.addEventListener('popstate', function(e){ // ...})hasn变化触发window.addEventListener('hashChange', function(e){ // ...})原创 2021-01-14 21:51:36 · 485 阅读 · 0 评论 -
h5 canvas 合成海报
文章目录效果实现效果实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> bo原创 2021-01-12 09:45:26 · 614 阅读 · 0 评论 -
策略模式-校验表单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form id原创 2020-12-21 14:27:50 · 114 阅读 · 0 评论 -
实现 instanceof
实现 instanceofinstanceof是在 左边的原型链上是否可以找到bfunction myInstanceof(left, right){ let protottype = right.protottype while(true){ if(left === null || left === undefined) return false if(left === protottype) return true left = left.__proto__ }}...原创 2020-12-21 13:46:06 · 118 阅读 · 0 评论 -
js 屏幕截图 dom-to-image
dom-to-image github简单示例var node = document.bodydomtoimage.toPng(node).then(function (dataUrl) { var img = new Image(); img.src = dataUrl; document.body.appendChild(img);}).catch(function (error) { console.error('oops, something went wr原创 2020-12-12 21:04:17 · 989 阅读 · 0 评论 -
canvas鼠标滑过效果
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas鼠标滑过效果</title> <style> :root,原创 2020-12-02 15:11:40 · 437 阅读 · 0 评论 -
js 高阶函数 AOP 切片编程 重写数组原型方法
概念AOP(面向切片编程) 就是把一些与业务逻辑模块无关的功能抽离出来,然后通过“动态织入”的方式参入业务的逻辑模块中。这样设计的好处是,首先可以保证业务逻辑模块的纯净和高内聚性;其次可以方便的复用模块。示例...原创 2020-11-23 09:50:52 · 285 阅读 · 0 评论 -
parseFloat parseInt 解析
parseInt转化为整数params: 要转化为整数的值radix:进制 2-32 默认10进制 0相当于没写parseInt(params, radix)parseInt('1') // 1parseInt('1dd') // 1parseInt('1.1dd') // 1parseInt('1', 0) // 0相当于没写 取默认的10进制 1的10进制1parseInt('2', 1) // 2的1进制 没有1进制 NaNparseInt('3', 2) // 3的2进原创 2020-11-20 11:33:21 · 208 阅读 · 0 评论 -
localStorage 封装
function setStorage(key,value){ let time = Date.now() localStorage.setItem(key,JSON.stringify({val:value,time:time}));}function getStorage(key){ let val = localStorage.getItem(key) if(!val) return; let data = JSON.parse(val) if(D原创 2020-10-23 14:56:52 · 220 阅读 · 0 评论 -
webSocket 基本使用
后端安装 webSocketnpm i ws创建对象const webSocket = require('ws')const wss = new webSocket.Srever({ port: 9998})监听事件连接事件wss.on("connection", client=>{ console.log('有客户端连接。。。')})接收数据事件wss.on("connection", client=>{ client.on("message", msg=&原创 2020-10-22 13:30:03 · 392 阅读 · 0 评论 -
js 防抖 节流
文章目录为什么需要函数防抖应用场景方法实现函数节流应用场景方法实现为什么需要在开发中,有部分的行为会频繁的触发事件执行,对于dom操作,资源请求等耗性能的处理,很可能导致界面卡顿,甚至浏览器的奔溃函数防抖 函数节流就是为了解决类似的需求函数防抖在函数需要频繁触发的情况下,只要有足够空闲的时间,才执行一次。应用场景实时搜索 input输入防抖示例拖拽方法实现function debounce(fun, delay=100){ let timer = null return func原创 2020-10-17 10:11:15 · 208 阅读 · 0 评论 -
js 函数柯里化
柯里化是一个将使用多个参数的函数转换成一系列使用一个参数的函数的技术。用处前端使用柯里化的用途主要是简化代码结构,提高系统的维护性,一个方法,只有一个参数,强制的功能的单一性,很自然就做到了功能内聚,降低耦合。柯里化优点就是降低代码的重复,提高代码的适应性。实现柯里化期望function add(a,b,c){}let newAdd = curry(add)// 可随意传 但参数个数固定newAdd(1)(2)(3)newAdd(1,2)(3)newAdd(1)(2,3)ne原创 2020-10-16 15:22:30 · 154 阅读 · 0 评论 -
js 纯函数编程
定义纯函数的定义是 对于相同的输入,永远会得到相同的输出,而且没有任何可1观察的副作用,也不依赖外部环境的状态即纯函数是指不依赖,修改作用域之外变量的函数纯函数是健壮的,改变执行次序不会对系统造成影响,因此纯函数的操作可以并行执行作用减少bug的引入纯函数非常容易进行单元测试,因为不需要考虑上下文环境,只需要考虑输入和输出更好的管理状态,使得可预测性增强,降低代码管理的难度,但是前端基本是在和副作用打交道,所有函数都是纯函数这种愿望不可强求原因在JavaScript中可以原创 2020-10-16 11:00:51 · 101 阅读 · 0 评论 -
封装 bind方法
Function.prototype.mybind = function(target,...args){ // target 改变函数执行的this指向 // [].slice.call(arguments,1) let _this = this let tmp = function(){}; let f = function(...args2){ // _this show的调用者 // 判断是否 new f()原创 2020-10-15 19:05:37 · 251 阅读 · 0 评论 -
js 浏览器常驻线程
文章目录浏览器常驻线程GUI线程 与js主线程是互斥的js执行机制-单线程大量数据操作浏览器常驻线程js引擎线程(解析执行js、用户输入、网络请求)GUI线程 (绘制用户界面、与js主线程是互斥的)http网络请求线程(处理用户的get、post请求,等返回结果后将回调函数推入任务队列)定时触发器线程(setTimeout、setInterval等待时间结束后把执行函数推入任务队列中)浏览器事件处理线程(将click、mouse等交互事件发生后将这些事件放入事件队列中)GUI线程 与js主原创 2020-10-10 08:45:56 · 181 阅读 · 0 评论 -
一个页面从输入 URL 到页面加载完的过程中都发生了什么事情
一个页面从输入 URL 到页面加载完的过程中都发生了什么事情加载过程浏览器根据 DNS 服务器解析得到域名对应的IP向这个IP发送请求服务器收到、处理并返回浏览器得到返回内容渲染过程根据HTML结构生成DOM树根据css生成 CSSOM将 DOM 和 CSSOM 整合 生成渲染树 renderTree根据渲染树 开始渲染页面结构遇到 script 会执行并阻塞渲染...原创 2020-09-28 20:47:40 · 133 阅读 · 0 评论 -
Web前端应该从哪些方面来优化网站性能
Web前端应该从哪些方面来优化网站性能减少页面体积,提升网络加载静态资源压缩合并 (js/css代码压缩合并,精灵图)静态资源缓存使用cdn加载资源更快优化页面渲染css放在前面 js放在后面懒加载减少dom操作...原创 2020-09-28 20:23:47 · 326 阅读 · 0 评论 -
前端网络
冯诺伊曼式计算机超过90%的电子设备度属于冯诺伊曼式计算机冯诺伊曼(计算机之父)图灵(计算机科学之父)五大部分运算器: CPU, GPU(显卡)存储器: 内存(断电数据清空, 读写速度快) 硬盘(辅存):(数据可以持久化,读写速度,相对较慢)控制器: 主板上的一些器件输入设备: 键盘 鼠标 麦克风 网口输出设备: 显示器 耳机 网口好程序员一定会修电脑不一定会修 但一定要懂ip地址分为4个段xxx.xxx.xxx.xx原创 2020-09-26 10:01:29 · 149 阅读 · 0 评论 -
get_post区别
文章目录get_post区别是基于什么前提的?如果没有前题,不使用任何规范,只考虑语法和理论上的http协议如果基于rfc规范的get_post区别没有安全性区别 因为http是明文协议是基于什么前提的?如果没有前题,不使用任何规范,只考虑语法和理论上的http协议get 和 post 几乎没有任何区别。只有名字不同如果基于rfc规范的理论上(Specification)get 和 post 具有相同语法的,但是有不同的语义get用来获取数据的post用来发送数据的其他地方没有区别原创 2020-09-26 10:00:55 · 102 阅读 · 0 评论 -
cookie session
文章目录cookiesessioncookie是有限制的,只能在相同的域名下是存储在浏览器上的,不是存在某个页面上的,是可以长期存储的。即使保存在浏览器里,也是存放在不同域名下的。发送请求时,请求头会自动携带cookie缺点:复制cookie信息 可以在别处使用xss注入攻击,获取你的cookie,获取用户信息session是存储在服务器的缺点:如果用户量非常大,服务器端很耗资源的。因为后端可能不止一台服务器,而用户的登录信息,一般只存在一台服务器上。因为用户的登录操作,在那台原创 2020-09-26 09:59:13 · 88 阅读 · 0 评论 -
js input输入 防抖
// 点击按钮搜索search.addEventListener('click',function(){ serProject() serpage.classList.add('show')})pinput.addEventListener('input',function(){ serchProject(this.value)})pinput.addEventListener('compositionstart', function () { imeFlag =原创 2020-09-22 16:22:33 · 2228 阅读 · 1 评论 -
BetterScroll 滚动插件使用 基本/vue/封装
BetterScrollBetterScroll文档基本使用js文件 可以从npm 下载 然后到node_modules<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2020-09-22 10:04:26 · 254 阅读 · 0 评论 -
js 无缝轮播/原型方法封装
在这里插入代码片原创 2020-09-20 11:20:13 · 111 阅读 · 0 评论 -
js 拖拽实例 自由下落
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拖拽实例</title> <style> .div{ posi原创 2020-09-20 09:31:58 · 142 阅读 · 0 评论 -
js 模拟重力场
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟重力场</title> <style> .div{ pos原创 2020-09-19 10:32:33 · 241 阅读 · 0 评论