WEB
文章平均质量分 73
莫兮是我
这个作者很懒,什么都没留下…
展开
-
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 · 522 阅读 · 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 · 483 阅读 · 0 评论 -
css-Sass
css-Sass 目录文章目录前言推荐阅读环境安装例子编译为`css`变量声明作用域`!global`注意嵌套规则和属性属性`@import`导入文件不想编译为`css` - Partials**注意**`@mixin`和`@include`向混入传递变量浏览器前缀使用混入`@extend`和继承函数前言CSS预处理器,扩展语言,减少CSS重复代码层叠样式表语言扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性生成良好格式化的 CSS 代码,易于组织和维护文件后缀为原创 2021-03-25 18:32:21 · 199 阅读 · 0 评论 -
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 · 295 阅读 · 0 评论 -
`webRTC`-点对点文件共享服务器
webRTC-点对点文件共享服务器 目录文章目录前言推荐阅读展示步骤使用文件`API`拾取文件`index.html`点对点连接和数据管道获取对文件的引用文件分块文件分块可读编码解码文件读取和发送文件读取的流程在接收端组合文件块文件自动下载向用户展示进度接受端总结完整的信令服务器前言拥有点对点的数据传输能力并且与文件API相结合利用WebRTC的Data Channel以及文件API来构造一个简易的文件共享应用主要在两个用户(peer)间共享数据的应用该应用的基本要求是实时性,两个用户必须原创 2021-03-24 01:20:30 · 383 阅读 · 0 评论 -
webRTC-简易视频通讯服务器
webRTC-简易视频通讯服务器 目录文章目录前言推荐阅读涵盖内容展示效果连接创建页面`index.html`获取一个连接登录开始对等连接发起通话检测通信挂断电话过程`webRTC`全部代码总结完整的信令服务器前言本文基于webSocket建立了一个网络视频通讯推荐阅读《Learning WebRTC》涵盖内容从客户端获取到服务器的连接识别各个连接端的用户两个远程用户发起通话结束通话展示效果连接包含两个页面:输入用户名,呼叫其他用户创建页面index.htm原创 2021-03-24 01:03:32 · 188 阅读 · 0 评论 -
webRTC-NodeJS创建信令服务器
webRTC-NodeJS创建信令服务器 目录文章目录前言推荐阅读构建信令服务器流程注意`WebSockets``server.js`识别用户完整的信令服务器前言本文取自《Learning WebRTC》创建完整的WebRTC应用,需要抛开客户端的开发,转而为服务端的开发推荐阅读《Learning WebRTC》构建信令服务器将不在同一个电脑中的两个用户连接起来服务器的目的是通过网络传输代替原先的信令机制对多个用户做出回应:允许一方用户呼叫另一方从而在双方间建立WebRT原创 2021-03-24 00:47:55 · 472 阅读 · 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 · 252 阅读 · 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 · 494 阅读 · 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 · 198 阅读 · 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 · 662 阅读 · 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 · 191 阅读 · 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 · 709 阅读 · 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 · 434 阅读 · 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 · 343 阅读 · 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 · 257 阅读 · 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 · 299 阅读 · 1 评论 -
js-export2Excel.js-带图片excel生成器
js-export2Excel.js-带图片excel生成器 目录文章目录前言不足与改进方向生成效果展示模块 - `export2Excel_module.js`使用代码`index.html``main.js`前言js生成.xls的excel文件,本质为生成XML网页基于对原版的导出进行再次封装,原博主:如何使用纯js导出Excel+export2Excel.js的图片导出(包教包会)Excle的构造函数:export2Excel(tHeadData, tBodyData, dataName原创 2021-03-17 16:55:09 · 1250 阅读 · 0 评论 -
canvas-在线笔记本的输入框实现
canvas-在线笔记本的输入框实现 目录文章目录前言推荐阅读效果展现代码实现前言目前只实现了文本框的输入和更改缺乏:已输入文本框的定位和内容更改插入和保存图片保存笔记Markdown长文本转换导出多格式websocket聊天室推荐阅读《HTML5 canvas》效果展现代码实现<!DOCTYPE html><html> <head> <title>Paragraphs</title>原创 2021-03-16 20:24:17 · 1485 阅读 · 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 · 307 阅读 · 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 · 259 阅读 · 0 评论 -
css-动画-旋转大风车
css-动画-旋转大风车 目录文章目录前言结果展现代码实现前言css实现动画效果学习资源结果展现代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ原创 2021-03-14 17:36:38 · 468 阅读 · 0 评论 -
canvas-简易画图应用程序,计算机绘图辅助程序
canvas-简易画图应用程序,计算机绘图辅助程序 目录文章目录前言代码展示效果展示前言此文为基于canvas的多边形绘图,计算机绘图辅助程序代码展示<!DOCTYPE html><html> <head> <title>Dragging Polygons</title> <style> body { background: #aaaaaa; }原创 2021-03-14 16:40:34 · 228 阅读 · 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 · 146 阅读 · 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 · 395 阅读 · 2 评论 -
js- 宏微任务和事件loop
宏微任务和事件loop 目录文章目录前言推荐阅读宏微任务的定义宏微任务的区别常见面试代码宏任务微任务`Event-Loop`在浏览器中的表现`Node`中的表现setImmediate与setTimeout的区别`process.nextTick``async/await`函数小节前言面试常问三问题宏微任务面对异步事件推荐阅读jiasm宏微任务的定义JavaScript是一个单线程的脚本语言。也就是说在一行代码执行的过程中,必然不会存在同时执行的另一行代码,就像使用alert原创 2021-03-12 00:47:45 · 218 阅读 · 0 评论 -
React-学习指南
React 目录:文章目录前言推荐阅读整个部分搭建本地环境1. 安装`Node.JS`2. 创建一个新的React项目React工具链的作用不使用工具链推荐的工具链Create React AppNext.jsGatsby更灵活的工具链从头开始打造工具链3. 删除新项目中的`src`所有文件4. 运行`CDN`链接核心概念1. 入门2. `JSX`变量声明在`JSX`嵌入表达式`JSX`特定属性`JSX`指定子元素`JSX`防止注入攻击`JSX`表示对象3. 元素渲染将一个元素渲染为 DOM更新已渲染的元原创 2021-03-11 18:49:49 · 93 阅读 · 0 评论 -
JS-内部爬虫-获取网页内全部`img`标签
获取网页内全部img标签 目录文章目录前言推荐阅读代码实现结果展示前言通过DOM获取文件内的所有标签推荐阅读《JS权威指南》代码实现for(let key in document.images){ console.log(key);}let context = Array.prototype.map.call(document.images, (event)=>{console.log(event)});结果展示...原创 2021-03-10 21:50:30 · 773 阅读 · 0 评论 -
SVG精髓-svg开发指南
SVG精髓 目录文章目录前言推荐阅读1. 入门1. 图形系统1. 栅格系统2. 矢量图形2. `SVG`作用1. 文档结构2. `circle`3. 指定样式 - `fill, stroke`4. 线 - `line`5. 变换坐标系统 - `use, transform, scale`6. 折线 - `polyline`7. `path`8. `text`2. 网页中使用`SVG`1. 常见的插入网页的方法1. ``2. `css`2. `SVG`作为应用程序3. 混合文档的`SVG`1. `svg`内原创 2021-03-07 19:48:30 · 674 阅读 · 0 评论 -
JS-基础算法
JS-基础算法 目录文章目录前言推荐阅读1. 反转字符串 - `split, reverse, join`2. 数字的阶乘 - `递归, array, reduce, fill`1. 递归2. 参数递归3. `Array, reduce, fill`3. 查找字符串中最长的单词1. `split`2. `reduce`3. `map`4. `递归`例子4. 返回数组中最大的数字1. `map, reduce`2. `apply, bind`解释`call, apply, bind`用法3. 递归5. 检查原创 2021-03-04 02:13:40 · 210 阅读 · 3 评论 -
JS常见正则方法整理
JS常见正则方法整理 目录文章目录前言1. 使用测试方法 - `test`2. 同时用多种模式匹配文字字符串 - `x|y`3. 匹配时忽略大小写 - `/x/i`4. 提取匹配项 - `match`5. 全局匹配 - `/x/g`6. 用通配符`.`匹配任何内容 - `/hu./`7. 将单个字符与多种可能性匹配 - `[aiu]`8. 匹配字母表中的字母 - `[a-z]`9. 匹配字母表中的数字和字母 - `[0-9]`10. 匹配单个未指定的字符 - `[^a-z]`11. 匹配出现一次或多次的字原创 2021-03-04 00:44:11 · 2183 阅读 · 1 评论 -
canvas-原生js实现时钟绘图效果
canvas-原生js实现时钟绘图效果 目录文章目录前言代码效果查看前言本文为canvas实现时钟效果可直接复制使用代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con原创 2021-03-03 15:37:11 · 167 阅读 · 1 评论 -
原生js实现轮播图-setInterval, setTimeout
原生js实现轮播图-setInterval, setTimeout 目录文章目录前言代码实现`setTimeout`和递归实现`setInterval`效果展示前言利用原生js实现轮播图代码复制可用代码实现setTimeout和递归实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati原创 2021-03-03 15:31:20 · 521 阅读 · 1 评论 -
canvas-实现钟表
canvas-实现钟表 目录文章目录前言推荐阅读思路解析代码实现结果观测前言模拟时钟的运行推荐阅读canvas基础思路解析主题有2种:表盘,表针绘制表针绘制表盘运行代码实现class Click{ constructor(canvas){ this.c = document.getElementsByTagName(canvas)[0]; this.c.width = 300; this.c.height = 30原创 2021-02-26 01:57:22 · 96 阅读 · 0 评论 -
canvas-基于lufyLegend的石头、剪刀、布游戏
canvas-基于lufyLegend的石头、剪刀、布游戏 目录文章目录前言开发实战石头剪子布游戏分析必要的`JS`知识分层实现代码实现1.整个界面代码解析2. 出拳部分3. 结果层显示4. 控制层5. 出拳6. 结果判定7. 游戏总体代码总结和评价模块前言存在一些问题开发实战石头剪子布游戏分析游戏需要的东西:图片描画图形绘制文字绘制鼠标的点击电脑AI条件分支与判断必要的JS知识随机数条件分支canvas操作,文本框、图像、切换lufylegend操作,最好分原创 2021-02-24 23:49:41 · 207 阅读 · 0 评论 -
JS-lufylegend游戏动画-人物运动
JS-lufylegend游戏动画-人物运动 目录文章目录前言引入库使用流程函数解析代码讲解移动运动代码讲解前言动画是游戏的最基本组成部分利用LAnimation类和循环时间,可以轻松实现一组动画的播放准备一张照片,包含任务的动作引入库lufylegend官网开发建议:<script src="./lufylegend-1.10.1.min.js">学习建议:<script src="./lufylegend-1.10.1.js"></原创 2021-02-23 15:30:44 · 372 阅读 · 2 评论 -
原生JS-canvas实现画板/签字板功能
目录:文章目录前言最简代码样例结果展示代码讲解思路代码讲解封装模块前言常见的电子教室里的电子黑板。本文特点:原生JS封装好的模块最简代码样例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v原创 2021-02-22 13:24:19 · 603 阅读 · 1 评论 -
Canvas-drawImage无法绘图,出现空白的解决办法
目录:文章目录问题剖析解决办法例子代码测试样例问题剖析在操作drawImage()函数时,经常会出现调取正常,但canvas绘制出现空白的情况:这种情况,原因可以归为:浏览器在加载图片时,图片尚未加载完毕,便开始绘图主要原因为:drawImage()为异步函数解决办法drawImage()函数,要等到img标签里指定的图像加载完成后,再开始绘图,否则会出现无图的情况可以声明两种加载方式:img.onload = function() {drawImage()}wind原创 2021-02-21 19:12:14 · 6286 阅读 · 0 评论 -
HTML5Canvas游戏开发实战
HTML5Canvas游戏开发实战 目录文章目录前言推荐阅读准备工作H5新特性1. video标签播放动画2. audio3. Canvas4. 获取当前位置5. 大量数据保存在客户端6. form强化canvas绘图解释canvas实现三维的推荐JS实现继承第二部分:基础知识canvas基本功能1. 画直线2. 画矩形实心矩阵3. 圆形4. 画圆角矩形5. 擦除Canvas画板复杂图形1. 曲线1. 二次贝塞尔曲线2. 三次贝塞尔曲线2. clip在指定区域绘图3. 自定义图形前言本文为进阶,旨原创 2021-02-18 17:23:49 · 571 阅读 · 0 评论 -
JS实现类的继承
JS实现类的继承目录:文章目录前言解释代码实现前言本文旨在介绍如何用JS实现类的继承主要内容:prototypeapply解释创建两个构造函数使用apply方法,将父对象的构造函数绑定在子对象上方法的继承:循环使用父对象的prototype进行复制,即可达到继承的目的代码实现function PeopleClass() { this.type = "human";}PeopleClass.prototype = { getType: function原创 2021-02-17 17:02:35 · 231 阅读 · 0 评论