![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
文章平均质量分 69
莫兮是我
这个作者很懒,什么都没留下…
展开
-
electron-14版后remote废除
文章目录前言安装与配置前言Electron最近的版本变迁比较频繁,在升级到14.0.0版本后,废除了很多旧有的API。而其中最主要的就是remote模块从旧有的模块里抽出,变成了一个需要新安装的模块@electronic/remote。新模块的使用方式和旧模块有很多的不同,特意记录下来分享。github-链接安装与配置第一步:npm install --save @electron/remote第二步:在主程序文件里引入:require('@electron/remote/main'原创 2021-09-07 01:25:13 · 2846 阅读 · 1 评论 -
NodeJS-如何生成SSL证书,https链接和http自动跳转到https
文章目录1. 安装TLS/SSL 证书1. 生成私钥2. 生成证书签名请求3. 移除密钥的密码4. 生成自签名证书2. 使用`https`链接3. `http`自动跳转到`https`1. 安装TLS/SSL 证书1. 生成私钥openssl genrsa -des3 -out site.key 2048这个命令会生成一个私钥。该私钥使用三重DES加密,以PEM格式保存,可以使用ASCII码解密。2. 生成证书签名请求openssl req -new -key site.key -out原创 2021-09-02 01:20:43 · 1393 阅读 · 0 评论 -
js-拖拉表格实现内容计算-在线excel
js-拖拉表格实现内容计算 目录文章目录前言实现结果代码实现`index.html``main.js`前言制作网页版ExcelH5新增功能:可拖拉-draggable, 可编辑-contenteditable实现结果代码实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Table</titl原创 2021-04-18 18:31:13 · 294 阅读 · 0 评论 -
js-基于AudioContext在canvas上显示声音波形
js-基于AudioContext在canvas上显示声音波形 目录文章目录前言效果展示代码展示`index.html``Aud.js`前言从ES7后开始启用AudioContex常用API是:createScriptProcessor, onaudioprocess, getChannelData注意:onaudioprocess已经废弃,开始改用AnalyserNode,MDN-AnalyserNode效果展示代码展示index.html<!DOCTYPE html>原创 2021-04-08 01:06:04 · 1166 阅读 · 0 评论 -
js-通过audioContext实现3D音效
js-通过audioContext实现3D音效 目录文章目录前言效果展示代码展示前言AudioContext的setPosition实现3D音效效果展示代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D Audio</title> <style> body, div原创 2021-04-07 01:31:45 · 552 阅读 · 1 评论 -
js-获取flv流文件二进制数据并分析
js-获取flv流文件二进制数据并分析 目录文章目录前言效果展示代码实现`index.html`前言对flv流文件,进行16进制转换,并用js解析效果展示代码实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Video</title> <style>原创 2021-04-06 15:10:51 · 852 阅读 · 0 评论 -
js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据
js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据 目录文章目录前言推荐阅读常见`API`代码实现`audio.html``streamFile.php`总结前言尝试利用浏览器中的audio API推荐阅读MDN常见APIAudioContextdecodeAudioData代码实现audio.html<!DOCTYPE html><html lang="en"><head> <meta char原创 2021-04-06 03:06:31 · 865 阅读 · 0 评论 -
JS-indexedDB和应用
JS-indexedDB和应用 目录文章目录前言推荐阅读本地存储`indexedDB``open``createObjectStore``add``get`遍历数据更新数据-`put``delete`使用索引 - `createIndex`应用场景前言前端数据库,webSQL的替代品推荐腾讯的离线日志reflow- Tent-reflow推荐阅读MDN - IndexedDBlocalForage:一个简单的 Polyfill,提供了简单的客户端数据存储的值语法。它在后台使用 Inde原创 2021-04-05 16:08:49 · 546 阅读 · 0 评论 -
js-前端video播放器
js-前端video播放器 目录文章目录前言推荐阅读传统播放模式视频切片 - `Accept-Ranges`服务器端请求特定的范围单一范围多重范围条件式范围请求范围请求的响应流媒体`Blob`Blob vs ArrayBuffer`Ajax``HLS`HLS 自适应比特流`m3u8`讲解文件列表`DASH`西瓜视频播放器`DASH`例子中的`MPD`文件`FLV`头文件`flv.js`工作原理播放器截图`canvas`播放视频前言Video, Blob URLHTTP RangeHLS, DA原创 2021-04-02 18:44:25 · 1304 阅读 · 0 评论 -
JS-前端二进制
JS-前端二进制 目录文章目录前言推荐阅读整体介绍图片预览1. `FileReader API`常见优化`Base64`编解码`Base64`的函数`btoa``atob`下载图片`fetch API``Object URL`缺点`Blob API``Blob`的构造函数**从字符串创建 Blob****从类型化数组和字符串创建 Blob**`Blob`方法`ArrayBuffer`和`TypedArray``ArrayBuffer``Unit8Array``ArrayBuffer`和`TypedArra原创 2021-04-02 14:50:36 · 201 阅读 · 0 评论 -
H5-MediaSourceExtension
H5-MediaSourceExtension 目录文章目录前言推荐阅读介绍诞生原因`MSE`标准缺点注意`DASH`协议优势常见特点缺点与对比接口`MediaSource`注意解决办法`Media Source Extension`转码开始测试的视频需要的工具引入方法检测片段基于`Fetch API`前言推荐阅读MDN-MSE APIH5直播系列二 MSE(Media Source Extensions)-MSE-简书官方文档翻译介绍媒体源扩展 API(MSE) 提供了实现无插件且原创 2021-04-01 20:30:25 · 370 阅读 · 0 评论 -
js-防抖和节流
js-防抖和节流 目录文章目录前言推荐阅读代码展示防抖多版本节流多版本前言防抖:短时时间内大量触发,但只执行一次原理:设置定时器,在指定的x时间后执行事件处理。期间每次触发事件都会重置定时器。目的:n秒内多次点击视为1次应用:地图点击节流:隔一段时间执行一次,期间多次触发不反应原理:设置定时器,在x时间后执行事件处理,当事件执行完后清除定时器。目的:n秒内只能点击1次应用:文本框输入提交推荐阅读手写实现防抖与节流-codeeJS防抖和节流-Lee代码展示防原创 2021-03-31 17:32:53 · 114 阅读 · 0 评论 -
canvas-腾讯小游戏推广-沙雕塔
canvas-腾讯小游戏推广-沙雕塔 目录:文章目录@[toc]前言游戏界面怪物等级和位置生成算法测试代码测试结果前言腾讯每次推广的游戏都是挂羊头卖狗肉针对一个垃圾小游戏的逆向算法猜测游戏界面怪物等级和位置生成算法// 初始英雄等级生成器const Hero = function(limitLevel, minLevel){ return Math.floor(Math.random()*limitLevel + minLevel);}// 怪物等级分区和生成器con原创 2021-03-30 13:58:12 · 139 阅读 · 0 评论 -
js-指定红包顺序和金额的算法
js-指定红包顺序和金额的算法 目录文章目录前言效果展示空包问题红包算法测试样例前言朋友拜托而写单个包最小金额为0.01如果除指定金额外,其余都为0.01,最后尾包存在为0的几率本算法通过了1000000次测试,出错率为百万分之3效果展示空包问题红包算法/* param: float, int, int, float param1:红包金额总额 param2:红包数目 param3:指定特殊红包 param4:指定特殊红包金额 */l原创 2021-03-30 02:11:28 · 168 阅读 · 0 评论 -
LeafletJS-初创简地图和冒泡提醒
LeafletJS-初创简地图和冒泡提醒 目录文章目录前言推荐阅读结果展示代码例子`index.html`前言Leaflet学习笔记推荐阅读[WebGIS教程 LeafletJS 初次使用LeafletJS](http://webgis.cn/leaflet-quickstart.html#_1)Leafle结果展示代码例子index.html<!DOCTYPE html><html lang="en"><head> <原创 2021-03-29 19:26:14 · 398 阅读 · 0 评论 -
Gis-ArcGis简单加载地图信息
Gis-ArcGis简单加载地图信息 目录文章目录前言推荐阅读结果展示代码`idnex.html``index2.html`前言GIS初识,使用ArcGis提供的接口,ArcGIS API for JavaScript使用方法:引入css, js设置显示js方法实现推荐阅读ArcGiS API for Js结果展示[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wi9DghYt-1617016269608)(image-2021032919原创 2021-03-29 19:11:29 · 777 阅读 · 0 评论 -
canvas-圆形流水动画
canvas-圆形流水动画 目录文章目录前言效果展示代码展示`index.html``main.js`前言特效展示效果展示代码展示index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na原创 2021-03-26 15:41:53 · 520 阅读 · 0 评论 -
canvas-随机粒子特效
canvas-随机粒子特效 目录文章目录前言结果展示代码`html``main.js`前言canvas实现前端的特效美术结果展示代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v原创 2021-03-26 00:30:54 · 2224 阅读 · 3 评论 -
js-Event Loop核心剖析
js-Event Loop核心剖析 目录文章目录前言推荐阅读学习Event Loop的原因堆,栈、队列堆(Heap)栈(Stack)队列(Queue)Event Loop`MacroTask`(宏任务)`MicroTask`(微任务)浏览器中的Event LoopJS调用栈同步任务和异步任务事件循环的进程模型执行进入microtask检查点时,用户代理会执行以下步骤例子第一次执行:第二次执行:第三次执行:第四次执行:例2**关于73以下版本和73版本的区别****在老版本中****引用贺老师知乎上的一个例转载 2021-03-24 02:48:39 · 307 阅读 · 0 评论 -
js-Event Loop
js-Event Loop 目录文章目录前言推荐阅读什么是`Event Loop`多任务执行办法`JS`的单线程问题`Event Loop`总结前言Event Loop是很重要的概念推荐阅读阮一峰-什么是Event Loop什么是Event LoopEvent Loop 是一个很重要的概念,指的是计算机系统的一种运行机制。JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题。本文参考C. Aaron Cois的《Understanding The原创 2021-03-24 01:45:01 · 99 阅读 · 0 评论 -
`webRTC`-点对点文件共享服务器
webRTC-点对点文件共享服务器 目录文章目录前言推荐阅读展示步骤使用文件`API`拾取文件`index.html`点对点连接和数据管道获取对文件的引用文件分块文件分块可读编码解码文件读取和发送文件读取的流程在接收端组合文件块文件自动下载向用户展示进度接受端总结完整的信令服务器前言拥有点对点的数据传输能力并且与文件API相结合利用WebRTC的Data Channel以及文件API来构造一个简易的文件共享应用主要在两个用户(peer)间共享数据的应用该应用的基本要求是实时性,两个用户必须原创 2021-03-24 01:20:30 · 435 阅读 · 0 评论 -
webRTC-简易视频通讯服务器
webRTC-简易视频通讯服务器 目录文章目录前言推荐阅读涵盖内容展示效果连接创建页面`index.html`获取一个连接登录开始对等连接发起通话检测通信挂断电话过程`webRTC`全部代码总结完整的信令服务器前言本文基于webSocket建立了一个网络视频通讯推荐阅读《Learning WebRTC》涵盖内容从客户端获取到服务器的连接识别各个连接端的用户两个远程用户发起通话结束通话展示效果连接包含两个页面:输入用户名,呼叫其他用户创建页面index.htm原创 2021-03-24 01:03:32 · 198 阅读 · 0 评论 -
webRTC-NodeJS创建信令服务器
webRTC-NodeJS创建信令服务器 目录文章目录前言推荐阅读构建信令服务器流程注意`WebSockets``server.js`识别用户完整的信令服务器前言本文取自《Learning WebRTC》创建完整的WebRTC应用,需要抛开客户端的开发,转而为服务端的开发推荐阅读《Learning WebRTC》构建信令服务器将不在同一个电脑中的两个用户连接起来服务器的目的是通过网络传输代替原先的信令机制对多个用户做出回应:允许一方用户呼叫另一方从而在双方间建立WebRT原创 2021-03-24 00:47:55 · 503 阅读 · 0 评论 -
webRTC- LearningWebRTC-读书笔记
LearningWebRTC 目录文章目录前言前提推荐阅读总结1. 开启WebRTC之旅在WebRTC平台传输音频和视频WebRTC的应用2. 获取用户媒体配置静态服务器媒体流页面注意媒体流的方法- getUserMedia APIAPI处理方法限制视频捕捉推荐阅读应用实例多设备处理创建一个拍照修改媒体流3. 创建简单的WebRTC应用本章内容理解`UDP`传输协议和实时传输WebRTC APIRTCPeerConnection对象信号传递和交涉会话描述协议-SDP清晰的路线到用户`STUN``TURN`原创 2021-03-24 00:19:54 · 266 阅读 · 0 评论 -
js-Blob浅析
js-Blob浅析 目录文章目录前言推荐阅读文件作为`Blob``index.html` - `input`上传文件`js`下载`Blob`构造`Blob``Blob URL``index.html``blobFiles.js`读取`Blob` - `FileReader`使用`FileReader`读取文本文件前言Blob:可以存储到数据库postMessage发送到其他窗口和workerXMLHttpRequest的send方法createObjectURL()获取特殊的blob://原创 2021-03-21 01:53:44 · 532 阅读 · 0 评论 -
js-websocket聊天服务器
js-websocket 目录文章目录前言推荐阅读例子展示代码实现`index.html``websocketServer.js`前言启用websocket:访问about:config,将network.websocket.override-security-block设置为true推荐阅读《JS权威指南》例子展示const socket = new WebSocket("ws://ws.example.com:123/resource");socket.onopen = fu原创 2021-03-19 17:33:24 · 217 阅读 · 0 评论 -
js-EventSource,ajax长连接,server-sent Event聊天服务器
js-EventSource,ajax长连接,server-sent Event聊天服务器 目录文章目录前言推荐阅读代码展示`index.html``main.js``event.php`错误示范`XMLHttpRequest`模拟`EventSource``Server-Sent Event`聊天服务器前言服务器端推送事件的Come技术监听消息,单向的,Server Sent Event服务器推送协议。只能是服务器推送什么,显示什么常见应用:聊天应用、股票行情、新闻推送报文头需要设置为:原创 2021-03-19 15:48:52 · 713 阅读 · 0 评论 -
js-JSONP
js-JSONP 目录文章目录前言代码展示`main.js``jsonp.php`客户端完整页面代码前言JSONP是JSON with Padding的简写,在web服务上流行的一种JSON变体包在一个函数调用里格式:回调和数据回调:页面接收到响应后调用的函数,动态指定数据:参数传递给回调函数的JSON数据http://xxx/?callback=handleResponse动态创建<script>,并指定跨域url实现代码展示main.jsfunction c原创 2021-03-19 01:48:53 · 202 阅读 · 0 评论 -
js-读取拖放文件
js-读取拖放文件 目录文章目录前言推荐阅读效果展示代码展示`index.html``main.js`前言H5拖放API和File API结合,创建文件信息的功能drop和event.dataTransfer.files推荐阅读《JS 高级程序设计》效果展示代码展示index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2021-03-19 01:10:38 · 730 阅读 · 0 评论 -
canvas-弹珠游戏
canvas-弹珠游戏 目录文章目录前言结果展示代码展示`pinball.html``pinball.css``requestNextAnimationFrame.js``stopwatch.js``animationTimer.js``progressbar.js``sprites.js``gameEngine.js``shapes.js``pinball.js`前言桌面弹珠游戏需要花时间了解源代码资源将会放在github-弹珠游戏结果展示代码展示pinball.htm原创 2021-03-18 19:46:02 · 471 阅读 · 0 评论 -
canvas-球体动画运动
canvas-球体动画运动 目录文章目录前言原版代码实现效果展示`index.html``requestNextAnimationFrame.js``main.js`基于时间的运动效果`index.html``top.js``bottom.js`基于时间的对比结果展示`index.html``main.js`前言Polyfill多平台适用边缘检测球体运动缺点:如果每次都要重新绘图,图很复杂就会拖累性能解决办法:clip()每次只重绘剪辑出来的区域建立副屏canvas实现双缓冲原创 2021-03-18 17:04:14 · 366 阅读 · 0 评论 -
js-拖放文件识别
js-拖放文件识别 目录文章目录前言代码展示前言Chrome是唯一支持文件系统API的浏览器实现了Drag Enter和Drag Over事件的反应通过FileSystem API在文件系统上申请5 MB空间不足:仅在Chrome实现代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-原创 2021-03-18 02:08:04 · 280 阅读 · 0 评论 -
canvas-图像动画
canvas-图像动画 目录文章目录前言效果展示代码展示前言canvas开发手册里提到的图像动画效果效果展示代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont原创 2021-03-18 01:27:54 · 316 阅读 · 1 评论 -
canvas-在线笔记本的输入框实现
canvas-在线笔记本的输入框实现 目录文章目录前言推荐阅读效果展现代码实现前言目前只实现了文本框的输入和更改缺乏:已输入文本框的定位和内容更改插入和保存图片保存笔记Markdown长文本转换导出多格式websocket聊天室推荐阅读《HTML5 canvas》效果展现代码实现<!DOCTYPE html><html> <head> <title>Paragraphs</title>原创 2021-03-16 20:24:17 · 1537 阅读 · 0 评论 -
svg/canvas-利用js-go生成仿真图
svg-利用js-go生成仿真图 目录文章目录前言结果展示代码展示`go`展示前言本程序基于svg建立的仿真图注意:js生成对资源占用极大,建议使用worker,最好是在后台生成后,前端只是展现结果文末附有golang程序结果展示代码展示let testSvg = function(){ this.width = 600, this.height = 320, this.cells = 100, this.xyrange = 30.0,原创 2021-03-16 15:31:28 · 330 阅读 · 0 评论 -
canvas-worker和postmessage实现图片滤镜
canvas-worker和postmessage实现图片滤镜 目录文章目录前言注意代码展示效果展示`postMessage``worker`前言postMessage:用于跨域的信息传递,此处用于worker的信息传递worker:在H5中,允许出现多线程处理,可以缓解网站的性能瓶颈注意worker必须部署到服务器上Tomcat, apahce, live-server,并且启动时才能运行代码展示<!DOCTYPE html><html lang="en"&g原创 2021-03-15 01:17:49 · 277 阅读 · 0 评论 -
canvas-简易画图应用程序,计算机绘图辅助程序
canvas-简易画图应用程序,计算机绘图辅助程序 目录文章目录前言代码展示效果展示前言此文为基于canvas的多边形绘图,计算机绘图辅助程序代码展示<!DOCTYPE html><html> <head> <title>Dragging Polygons</title> <style> body { background: #aaaaaa; }原创 2021-03-14 16:40:34 · 241 阅读 · 0 评论 -
canvas扩展-基于原有API,新增虚线函数
canvas扩展-基于原有API,新增虚线函数 目录文章目录前言代码展示结果展示前言当原本的canvas API无法满足需求时,对CanvasRenderingContext2D进行功能扩展例子为增加绘制虚线函数代码展示let canvas = document.createElement('canvas');canvas.id = 'canvas';document.body.appendChild(canvas);let context = document.getElemen原创 2021-03-14 15:10:53 · 166 阅读 · 0 评论 -
canvas-实现放大镜效果
canvas-实现放大镜效果 目录文章目录前言推荐阅读代码展示结果展示前言本文为canvas实现放大镜逻辑简单,适合作为基础项目练手推荐阅读《H5 canvas核心技术》代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-03-14 00:10:36 · 430 阅读 · 2 评论 -
js- 宏微任务和事件loop
宏微任务和事件loop 目录文章目录前言推荐阅读宏微任务的定义宏微任务的区别常见面试代码宏任务微任务`Event-Loop`在浏览器中的表现`Node`中的表现setImmediate与setTimeout的区别`process.nextTick``async/await`函数小节前言面试常问三问题宏微任务面对异步事件推荐阅读jiasm宏微任务的定义JavaScript是一个单线程的脚本语言。也就是说在一行代码执行的过程中,必然不会存在同时执行的另一行代码,就像使用alert原创 2021-03-12 00:47:45 · 232 阅读 · 0 评论