吴小迪专栏之原生JS
关注
分享
扫一扫
文章平均质量分 61
里面内容都是吴小迪在前端开发和学习过程中感觉重要的原生JS重点总结
吴迪98
喜欢敲代码的吴小迪~
展开
-
判断若干个数字范围是否有重叠区域
【代码】判断若干个数字范围是否有重叠区域。原创 2023-03-13 12:33:24 · 438 阅读 · 0 评论 -
一百行js代码手写薪手引导功能
文章目录前言：一、项目的html代码二、项目的css代码三、项目的js代码四、手写的intro的css代码五、手写的intro的js代码前言：此篇文章的初衷是为了与大家分享一下新手引导这类的开源组件的实现原理。目前由于时间原因没有进行代码的文字说明与介绍。后续会补进来。一、项目的html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht原创 2022-03-29 13:21:27 · 1530 阅读 · 0 评论 -
自己用html + js 一百行代码做一个朗读器
感谢内容提供者：金牛区吴迪软件开发工作室文章目录前言一、设置语言和朗读人员二、设置音高【不是声音大小】三、设置音速四、设置声音大小五、添加暂停和恢复播放功能六、完整代码前言因为笔者最近在学习英语，所以才想找一个朗读器跟着一起念着读，结果没找到在线朗读器，没办法。。。只有自己动手做一个了，老话说的好：自己动手，丰衣足食~先给大家看下最终效果【没管样式哈~，只是保证有个结构和功能正常，样式可以自己画一画！】废话不多说，代码开整！一、设置语言和朗读人员我们需要获取到支持哪些语言和人员：con.原创 2022-02-09 12:10:46 · 2246 阅读 · 4 评论 -
HTML5新特性 之 Web SQL
感谢内容提供者：金牛区吴迪软件开发工作室文章目录前言：一、初步了解 Web SQL的使用1. 创建数据库2. 创建表并向表里新增数据3. 查询数据4. 修改数据5. 删除数据二、做一个 Todo List1. 创建一个简单的html页面2. 写js逻辑① 功能1：点击新增代办事项的时候出现modal② 新增代办事项③ 渲染代办事项列表④ 修改代办事项【包括更改描述以及更改状态】+ 删除代办事项前言：学习此内容需要事先掌握基本的 html、css、js 以及简单的 SQL。SQL的学习：SQL与.原创 2021-11-28 15:27:16 · 2243 阅读 · 4 评论 -
JavaScript实现汉字转拼音功能
今天笔者来与大家分享如何使用js来将汉字转拼音功能。首先请大家下载需要引入的js文件【仅9kb】。实现的效果【笔者没有将拼音隔开，你可以自行加入代码让其隔开。如果实在不会写请下方评论或私聊我吧。】：小提示：如果想分开的话建议使用Pinyin.parse()方法。然后就考验你的js操作功底了。使用方法【html小demo】：下方引入的./wdHanzi2pinyin.js你需要在笔者...原创 2020-02-28 17:36:13 · 26382 阅读 · 4 评论 -
JavaScript的数据类型详细介绍
JavaScript的数据类型分为俩种，一种是基本数据类型，一种是引用数据类型基本数据类型包括：Number - - (数字)String - - (字符串)Boolean - - (布尔值)Undefined - - (未定义)Null - - (空的)Symbol - - (符号)引用数据类型包括：1.Object - - (对象)2.Array - - （数组）...原创 2019-05-03 20:05:30 · 37909 阅读 · 2 评论 -
JS节流和防抖
首先我们要了解节流和防抖是用来处理什么问题的：待解决问题1：如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办。待解决问题2：如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？为了应对如上场景，便出现了函数防抖和函数节流俩...原创 2019-05-12 16:26:28 · 33796 阅读 · 0 评论 -
如何将HTML转成图片？看这里你就会了！
笔者在去年的一个项目当中是给学校做的一个后台管理系统，当时是要有在页面上编辑卷子然后将卷子导出的功能。就这涉及到了富文本编辑器的知识和将HTML转成图片的技术。今天这个文章主要是讲如何将html转成图片，富文本编辑器的知识可以观看笔者的另外一篇博客富文本编辑器实现原理如果想将html元素转变成图片那么就需要俩个技术。1.html2canvas – 将html转变成canvas2.canv...原创 2020-06-05 17:42:06 · 62020 阅读 · 11 评论 -
彻底了解js的与和或
学过JS的朋友们应该都知道这俩个运算符（“||” 和 “&&”）的名字 - - 短路运算符。今天我们就来看一看它究竟是怎么个短路法！一：在if判断中的用法：||的用法：if (2 > 1 || 2 > 5) { console.log('CSDN吴小迪');}“||”的用法是如果前面的表达式满足了那么就不会再走到下一个表达式，之间就会进入到if的执行语...原创 2019-05-15 16:24:21 · 44185 阅读 · 2 评论 -
前端开发常用JS功能函数（下）
接上一篇：前端开发常用JS功能函数（中）数字的加减乘除numAdd - -计算数字相加function numAdd(num1, num2) { let baseNum, baseNum1, baseNum2; try { baseNum1 = num1.toString().split(".")[1].length; } catch (e) {...原创 2020-04-19 09:38:24 · 18142 阅读 · 0 评论 -
将字符串按指定规则切割，加入指定内容
比如下面这个需求：将证件号码按照6-8-6分割将银行卡按照4-4-4-4-4分割将手机号按照3-4-4分割都是分割，那么我们就可以单独写一个方法来进行这个处理：function segmentTheStr(str = '', segmentArr = [], customSymbol = ' ') { // TODO:自己在这里写一下类型判断的代码，如果传入的参数的数据类型不对...原创 2020-04-09 16:12:21 · 24442 阅读 · 2 评论 -
前端AI语音方面的实现
文章目录前言一、开始写代码写html和简单的cssjs代码二、知识点讲解属性介绍：方法介绍：事件介绍三、兼容性介绍兼容写法三、实战演习全部代码：前言今天我们来点有意思的，AI语音转换！当我们遇到语音转换的需求感觉，哇，好难啊，这怎么开发啊。其实这是很简单的，今天笔者就来给大家演示一下我们用js实现语音转换功能！首先我们先来做俩个按钮，一个开始按钮一个结束并开始转换语音的按钮：一、开始...原创 2020-04-05 00:08:58 · 21090 阅读 · 13 评论 -
前端下载文件的思路
比如我们的用户在之前上传了各种类型的文件到我们的服务器上。然后在通过留存在数据库的服务器url我们就可以访问那个资源。注意点：a标签的href属性指向链接的目标可以是各种类型的文件。如果是浏览器能够识别的类型，会直接在浏览器上显示；如果是浏览器不能识别的类型，会弹出“文件下载”对话框，允许用户下载到本地。比如jpg，html这些都是浏览器能够识别的就会直接展示，如果是docx一类的或者其他...原创 2020-03-21 17:27:19 · 19791 阅读 · 0 评论 -
伪数组是什么？伪数组与数组的区别，将伪数组变成真数组。
当我们了解伪数组之前先了解下普通的数组的特点数组是用来存储一系列值的一个集合，而每个值在数组里面都有一个对应的索引，也可以叫做下标，索引是从0开始的，依次递增。比如：let arr = ['a','b','c'];// 字符串a，b，c对应的下标分别为0， 1， 2，使用 数组名字[索引] 的方法即可取到对应的值。数组的length为数组当中所存值的总个数，比如上方定义的arr数组的l...原创 2019-08-18 17:13:13 · 48315 阅读 · 2 评论 -
javascript之IE兼容篇
前端开发等需求明确说明需要兼容IE时，我们才发现IE真的很恶心，不管是html5与css3的支持情况还是js需要做的兼容写法，都是令我们作呕的。但是身为开发人员，需求下来了又不能不管。只能往前冲，所以笔者今天就写了这边笔者自己的小总结博客。希望能在你开发项目兼容IE时有所帮助！// 获取浏览器可视窗口的宽度与高度：var clientWidth = document.documentEle...原创 2020-03-14 17:39:51 · 2097 阅读 · 1 评论 -
客户端存储方法介绍
很多时候我们在做前端开发的过程中需要缓存一些数据到我们客户端。那么就需要了解一下storage方面的知识了。本文将介绍几种不同的缓存方式。文章目录查看有哪些存储方式。Local Storage特点：使用方法：Session Storage特点：使用方法和localStorage一样localStorage与sessionStorage的注意点：Cookie特点：弊端：安全方面的考虑三者的应用场景...原创 2020-03-14 17:34:36 · 21834 阅读 · 2 评论 -
js加载页面之前的方法介绍
Document.onload它是在结构和样式加载完才执行js。【就是在html和css都完事以后才执行】Window.onload它不仅仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文件，全部加载完才会触发window.onload事件。jquery中的ready指定在DOM完全加载时要执行的函数。使用方法：// 引入jQuery：<script src="ht...原创 2020-03-14 14:07:17 · 2183 阅读 · 0 评论 -
canvas的使用
文章目录一、canvas在移动端自适应大小canvas坑1：设置canvas的css的宽高会导致你的填充内容被拉伸canvas坑1解决办法：解决后的代码与效果如下：canvas坑2：不能设置css属性如何让它自适应？canvas坑2解决办法：二、设置背景色，画填充色三、填充字体、设置字体大小、粗体、颜色、文本X,Y轴居中对齐canvas坑3：设置完背景色设置文字失败？四、canvas填充字体模糊的...原创 2020-03-09 14:15:42 · 24397 阅读 · 0 评论 -
对手机网络状态改变时的监听
我们做app的时候可能会经常遇到这样的需求，当客户端的网络状态更改的时候进行一系列的操作。比如客户端网络断了，或者恢复了网络进行一些友好提示之类的。其实做这个非常简单，仅仅需要做俩个监听即可：// 网络连接成功监听window.addEventListener('online', () => { alert('online');})// 网络断开监听window.add...原创 2020-02-17 17:59:12 · 24646 阅读 · 0 评论 -
vue与react当路由页面跳转时滚动位置不对的处理
在我们开发react或者vue项目的时候会发现当切换路由进行页面跳转的时候如果在前一个页面将滚动条滚到了最下面然后进行跳转那么接下来的那个页面也会默认滚动在最下面。这个时候我们就需要处理一下。在处理之前我们首先需要知道原因在哪里：原因是因为虚拟dom的算法问题，导致不会更新scroll解决方法：在你的外层框架监听history.location.pathname的变化，只要变了那就将b...原创 2020-01-15 14:26:01 · 21544 阅读 · 0 评论 -
手动向浏览器追加路由记录
笔者最近做到一个需求，需要提交某数据成功后到详情页的时候点击框架的返回要返回到列表页，然后就想到了手动向浏览器追加记录的这个方法：history.pushState();【这个方法在history的原型里】一共有三个参数第一个参数是查询参数，不可超过640kb。可以设置为null第二个参数是浏览器的title，到时候返回的时候用，可以设置为null第三个参数是你要手动追加的url字符串...原创 2020-01-15 09:54:17 · 20567 阅读 · 0 评论 -
js数组从子级向父级遍历
大家开发的时候是不是会经常遇到这种需求，一个N个层级的数组，只有叶子级的数据有金额或者其他的信息，然后需求需要你把每个父级都加上汇总的数据集合。那么我们该怎么做呢？实战项目需求参考：上面的数据是计算错误的，圈出来的地方要求数据是正确的，需要计算。我们自己的解决思路整理如下：既然只有子级有数据，然后上面的每一个层级都需要汇总那么肯定是优先计算最深的层级了。所以我们遍历数据需要做特殊处理或...原创 2020-02-27 18:57:25 · 27701 阅读 · 3 评论 -
do{}表达式的详细介绍【与实战结合】
do{}表达式是ES6的最新提案。截止目前测试还未成功,估计是提案浏览器还没跟上,如果朋友们想要项目中使用就需要引入babeljs进行编译。接下来我们一起来看一下用了这个 do{} 表达式究竟有哪些好处。它的用法是如何的。do{}的用法const test = do { let a = 2; let b = 4; a * b + 1;}console.log(test) //9...原创 2019-11-04 16:03:37 · 28147 阅读 · 3 评论 -
实现图片前端JS压缩并上传
一、图片上传前端压缩的现实意义对于大尺寸图片的上传，在前端进行压缩除了省流量外，最大的意义是极大的提高了用户体验。这种体验包括两方面：由于上传图片尺寸比较小，因此上传速度会比较快，交互会更加流畅，同时大大降低了网络异常导致上传失败风险。最最重要的体验改进点：省略了图片的再加工成本。很多网站的图片上传功能都会对图片的大小进行限制，尤其是头像上传，限制5M或者2M以内是非常常见的。然后现在的...转载 2019-11-01 11:14:29 · 3893 阅读 · 5 评论 -
JavaScript中try{}catch{}finally的使用
try{}catch{}finally{}的使用try{}catch{}finally{} 语句一般是用来将有可能引发错误的代码（比如异步请求）放在try语句块中，并且对应一个响应，然后有异常被抛出到catch中。语法：try { //有可能引发错误的代码} [catch (exception_var_1 if condition_1) { //处理错误为condition_1的情况...原创 2019-07-28 13:08:05 · 41507 阅读 · 0 评论 -
面向对象编程(OOP)的概念
文章目录一、OOP的全称：二、概念：三、面向对象特征：1.封装（Encapsulation）2.继承（Inheritance）3.多态（Polymorphism）4.抽象（Abstraction）一、OOP的全称：Object Oriented Programming二、概念：NamespaceClass：定义对象的特征，定义对象的模子，JS没有类的概念Object：实体Property：属性，对象的特征（静态）Method：方法，对象的特征（动作行为）Constructor：构原创 2019-07-27 23:56:24 · 44207 阅读 · 0 评论 -
JS获取/设置滚动距离的方法与兼容写法
JS获取浏览器滚动距离的兼容写法代码如下：document.documentElement.scrollTop || document.body.scrollTopdocument.documentElement.scrollLeft || document.body.scrollLeft拓展个毫无关联的抛物线公式：公式：y = axx + b*x + c系数：a 决定开口方向，a...原创 2019-07-27 23:34:43 · 44955 阅读 · 0 评论 -
类似animation-timing-function属性的各种值的算法
关于animation的animation-timing-function属性详解在我们开发的过程中会常用到css3的animation动画效果，关于animation它的第三个参数不知道朋友们有没有深入的研究过，就是关于动画的执行速度，是由快到慢还是平稳推近亦或者是由慢到快等等。今天我们就用js写一下这个算法：/*t: current time（当前时间）； ---- elapsed...原创 2019-07-27 22:31:08 · 36672 阅读 · 0 评论 -
js实现元素拖拽四个角以及四个边改变大小以及拖拽中间主体可移动
效果图：功能介绍图：代码实现：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0 } .box ...原创 2019-07-27 12:24:04 · 33874 阅读 · 20 评论 -
JS实现拖拽效果
实现拖拽效果的实现思路以及演示代码：实现思路：在CSS中设置你要进行拖拽的图片或者元素的样式在JS中获取元素，以及他的宽高和浏览器的宽高在要被拖拽的元素上绑定鼠标按下事件阻止浏览器默认行为获取光标在元素按下时的坐标绑定元素移动事件获取光标在可视窗口的坐标计算拖动的图片定位位置判断是否在窗口范围内设置拖动过程中图片的定位绑定鼠标弹起事件演示代码：如果你对JS如果绑定...原创 2019-07-27 12:09:57 · 29854 阅读 · 1 评论 -
JavaScript的三大流程结构详细讲解
JS的流程控制语句：顺序结构顺序结构表示程序中的各操作是按照它们出现的先后顺序执行的。选择结构（条件结构）选择结构包括 if 与 else 还有switch和case这种搭配组合。循环结构就是 for ， for in ， for of或者数组的遍历方法就属于循环结构。简单来说 if 与 else 就是流程控制语句当中的选择结构，也叫条件结构。语法：简单 if...原创 2019-07-27 10:36:34 · 35253 阅读 · 1 评论 -
提高JS性能的12个技巧
在我们开发的过程中，应该始终考虑性能。而本文列举了有效提高系统性能的12个方法，如果朋友们有更多的技巧请在吴小迪的博客下方评论，谢谢。性能是创建网页或应用程序时最重要的一个方面。没有人想要应用程序崩溃或者网页无法加载，或者用户的等待时间很长。根据Kissmetrics，47%的访问者希望网站在不到2秒的时间内加载，如果加载过程需要3秒以上，则在40%的访问者会离开网站。考虑到以上这些数字，你在...原创 2019-07-27 10:04:45 · 44830 阅读 · 0 评论 -
javascript里的??的意思及作用
JavaScript里的 ？？ 表达式：作用：三元表达式的简写三元表达式的写法：表达式 ? 表达式为真执行的 : 表达式为假执行的??的写法：表达式为真执行的 ?? 表达式为假执行的它类似于||表达式，只不过||会做隐式类型转换，而??不会做隐式类型转换关于 && 和 || 的深度用法请看：彻底了解“||”和“&&”？？的实战运用：cons...原创 2019-07-18 22:13:38 · 31462 阅读 · 11 评论 -
前端常用正则整理
1. 数字：^[0-9]*$2. n位的数字：^\d{n}$3. 至少n位的数字：^\d{n,}$4. m-n位的数字：^\d{m,n}$5. 零和非零开头的数字：^(0|[1-9][0-9]*)$6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$7. 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$...原创 2019-07-14 22:05:47 · 29257 阅读 · 2 评论 -
ES5/6新特性
文章目录一、ES5：1、数组尾逗号：2、严格模式：二、ES6：1、模板字符串2、块级作用域3、箭头函数4、解构赋值5、对象字面量改进6、Spread Operator7、Promise8、函数默认参数9、模块的 Import 和 Export10、内置对象新增API：11、新增Map集合：12、新增Set集合：13、Symbol符号一、ES5：1、数组尾逗号：[,,,].length[1, 2, 3,].length//支持ES5的则length为3//不支持ES5的length为4{ p原创 2019-07-14 17:03:16 · 42078 阅读 · 0 评论 -
Promise的关键点笔记
Promise简介：Promise对象用于表示一个异步操作的最终状态（完成或失败），以及该异步操作的结果值。Promise的次要作用：Promise是为了解决代码的嵌套问题。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。Promise的特点：Promise里的内容会立即执...原创 2019-07-14 11:56:15 · 28737 阅读 · 0 评论 -
JS正则表达式小笔记
JS正则表达式：作用：字符串模式匹配，验证字符串是否符合指定的格式。创建方法：//直接量：let reg = /pattern/attr;//new RegExp();let reg = new RegExp(pattern, attr);//pattern:模式//attr：特性字符串pattern模式：[] - - 取范围内的一个字符，如：[0-3]、[ace257]...原创 2019-07-07 22:59:16 · 35543 阅读 · 0 评论 -
浏览器事件默认行为介绍与阻止的方法
浏览器默认事件行为：浏览器中点击右键弹出快捷菜单点击超级链接跳转刷新页面表单中点击提交按钮能够提交表单阻止浏览器默认行为的方法：//标准event.preventDefault();//非标准event.returnValue = false;//兼容写法：event.preventDefault ? event.preventDefault() : event.re...原创 2019-07-07 21:21:29 · 5356 阅读 · 0 评论 -
事件委派的使用及作用
事件委派事件委派适用于未来的元素（动态添加的元素）。利用事件冒泡，将后代元素上事件的处理程序委派给祖先元素。event.target || event.srcElement - 在事件传播的过程中，获取最初触发事件的事件源元素示例：此例子在html初始化了一个id为wrapBox的ul元素。而后通过js在for循环当中给ul添加了四个子元素，并分别给他们设置了不同的id。最后在id为...原创 2019-07-07 20:57:09 · 39598 阅读 · 6 评论 -
JS事件流介绍以及阻止事件冒泡
JS的事件流（事件处理的流程）：事件捕获处理目标事件冒泡事件捕获：在DOM树中，沿着DOM树结构，从顶层向底层传播事件的行为。从最不确定的元素到最确定的元素事件传播的行为。处理目标：对目标元素进行操作。事件冒泡：在DOM树中，沿着DOM树结构，从底层向顶层传播事件的行为。从最确定的元素到最不确定的元素事件传播的行为。注意点：现代浏览器中事件处理的方式都默认按照事件冒...原创 2019-07-07 20:15:01 · 3887 阅读 · 0 评论