![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
Seven_5477
这个作者很懒,什么都没留下…
展开
-
手写Promise源码的实现思路
手写Promise源码的实现思路原创 2023-03-22 22:19:27 · 1410 阅读 · 0 评论 -
js利用vue数据监听原理Object.defineProperty实现语音播放监听
利用vue数据监听原理Object.defineProperty实现语音播放监听原创 2023-02-28 16:25:15 · 867 阅读 · 0 评论 -
前端登录状态验证Session和Token的区别
前端登录验证Session和Token的区别原创 2023-02-10 11:47:19 · 584 阅读 · 0 评论 -
js中将类数组转为数组的两个方法
js中将类数组转为数组的两个方法原创 2023-02-06 18:02:23 · 145 阅读 · 0 评论 -
前端播放语音流方案
当前项目需要前端播放语音,调用语音合成接口,会拿到一段语音流。原创 2022-09-29 15:09:14 · 2015 阅读 · 1 评论 -
js利用web-worker开一个新线程计算大文件的MD5值,不影响主线程的代码运行
在写上传文件这个功能的时候,需要得到文件的MD5值。小文件(100M以内)的MD5值可以1秒内算出,但是大文件会比较耗时间,比如计算一个500M的文件需要10S左右。我先选择文件1(500M)上传,正在计算MD5值,我又选择一个文件2上传,会打断文件1的MD5计算,这样显然是不行的。所以,需要开一个子线程来计算MD5值,且不影响主线程。MD5的计算:基于spark切片。注:用到worker需要用服务器方式打开:(vscode)HTML代码:<!DOCTYPE html><原创 2021-04-09 17:39:21 · 2004 阅读 · 0 评论 -
ajax返回200OK却调用error函数(response为空需要指定dataType)
在使用ajax上传文件的时候,出现了上传成功,返回了200OK却调用error函数的情况:$.ajax({ type: "POST", url: "/rpc/upload", //接口 data: file_data, cache: false, processData: false, contentType: false, //必须false才会自动加上正确的Content-Type xhr: function () { var x原创 2021-03-24 18:00:11 · 530 阅读 · 0 评论 -
js函数内部return一个函数,自动调用toString方法
学习闭包的时候,发现这么一段代码:function add(m) { var tmp = function (n) { return add(m+n); }; tmp.toString = function () { return m; }; return tmp;}console.log(add(1)(2));刚开始看的时候,不明白为什么要改写toString方法,查了一些资料,都没有直观地讲是怎么回事,后来自己测试,终于想原创 2021-02-25 18:17:27 · 1497 阅读 · 3 评论 -
js中的switch case语句,case指定多个条件时的写法
let a = 1;switch(a){ case 1 || 0: console.log("aaa"); break; default: console.log("else");}输出的结果为:aaa当把a的值改为0的时候,想要的结果是aaa,但是结果却为:else,什么原因呢?在js中,case后面的语句是一个整体的表达式,不能拆分开,就是说这里的case 1 || 0其实相当于case (1 || 0)。(1 || 0)的值为1,当原创 2021-02-19 11:10:00 · 30481 阅读 · 0 评论 -
js中不同数据类型之间的比较规则
数据类型之间的比较规则:{} == {} :两个对象进行比较,比较的是堆内存的地址null == undefined => true;null===undefined => falseNaN == NaN => false : NaN和谁都不相等对象和字符串进行比较,是把对象toString()转换为字符串后再比较剩余的所有数据类型不一样的情况:都是先转换为数字(1)对象转数字:先转换为字符串,再转换为数字(2)字符串转换为数字:只要出现非数字字符,结果就是NaN(3原创 2021-02-19 09:57:31 · 750 阅读 · 0 评论 -
图解JS盒子模型的基本属性:clientWidth/Height、offsetWidth/Height、offsetTop/Left、scrollWidth/Height、scrollTop/Left
写一个JS盒子 <style> .container { width: 300px; height: 300px; border: 3px solid red; margin: 50px; position: relative; } .box { padding: 30px; width: 100px; height: 150px;原创 2021-01-22 16:42:20 · 251 阅读 · 0 评论 -
js简单实现鼠标拖拽功能:盒子可以跟着鼠标移动位置
实现的原理:根据上面的图可以算出移动后的盒子的left和top:鼠标距离边界的值:ev.pageY - box.topev.pageX - box.leftbox2.top = ev2.pageY - (ev1.pageY - box1.top)= ev2.pageY - ev1.pageY + box1.topbox2.left = ev2.pageX - (ev1.pageX - box1.left)= ev2.pageX - ev1.pageX + box1.left代码如下:&原创 2021-01-20 14:26:16 · 2018 阅读 · 0 评论 -
JS实现选项卡插件的两种写法:jQuery和class
实现插件的几个注意点:(1)定义一个固定的html结构,比如选项卡的标题的标签为为li,每个选项卡的内容的标签为div等等;(2)选中时的样式提前确定;(3)最好先用简单的JS实现选项卡的功能,再改为插件的模式。html结构如下: <style> * { margin: 0; padding: 0; } ul { list-style: none; } #tabBox { box-sizing: border-box; margin原创 2020-12-29 11:21:52 · 229 阅读 · 0 评论 -
JS+jQuery实现渐隐渐现轮播图:模拟服务器获取图片数据
我前面写过简易版轮播图:简易轮播图也写过无缝连接的轮播图:无缝连接轮播图现在是实现渐隐渐现的轮播图,它与前面两个轮播图的区别是:不是左右滑动,而是所有的图片重叠,单张渐隐渐现。利用的是CSS中的z-index和opacity两个属性,需要显示的图片的z-index和opcacity都为1,其余图片的z-index和opcacity都为0。html部分:index.html<!DOCTYPE html><html><head> <meta charse原创 2020-12-25 16:30:07 · 200 阅读 · 1 评论 -
用JS+JQuery实现无缝连接的轮播图:自动轮播,手动轮播
我之前写过一个简易版的自动+手动轮播图:简易轮播图但是这个轮播图在切换的时候是没有实现无缝滚动的,每张图片都是单张切换的,而不是滑动。现在用JQuery实现无缝连接的轮播图。轮播图的原理如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>无缝轮播图</title></head><style type="text/cs原创 2020-12-25 10:44:43 · 1158 阅读 · 1 评论 -
在正则表达式中,^ 和 $ 同时出现的含义
^ :以哪个元字符作为开始;$ :以哪一个元字符作为结束。例:/^a/ 匹配以a字符作为开头的字符串/^abc/ 以abc字符串为开头/^\d/ 以数字作为开头/abc$/ 以abc作为结束/\d$/ 以数字作为结束当 ^ 和 $ 同时出现时,表示只能匹配 ^ 和 $ 之间的内容,例:/^abc$/ 只能匹配'abc'表示开始和结尾都是"abc"的字符串:容易被理解为abcabc这种形式的也是可以的,但其实不行。准确来说这么理解:必须以a开头,必须以c结束原创 2020-12-15 13:47:16 · 4713 阅读 · 3 评论 -
ajax请求队列:把每一个请求存入数组中,然后通过abort中止请求
/* @params url: 请求的地址 pram: 发送的数据 method: 请求的方式 */var RequestArray = [], //存储请求的数组 argItem = [], result = null, xmlHttp = null;function sendAjax(url, pram, method) { AddRequestArray(url, pram, method);}function AddRequestA原创 2020-11-25 17:11:15 · 278 阅读 · 0 评论 -
如何让函数执行一次(JavaScript)
将函数写为函数表达式var func = function () { console.log("函数func......");}func();func();在函数体的最后加一句执行一次的语句var func = function () { console.log("函数func......"); func = function () { //这里可以写你想让函数体最后执行的内容 };}func();func();可以在执行一次的语句中加一个输.原创 2020-11-05 10:25:48 · 602 阅读 · 0 评论 -
js中的原型prototype、__proto__解析,万物皆对象
prototype原型(prototype):每一个函数在创建之后都会拥有一个名为prototype的属性,这个属性指向的是:以当前函数作为构造函数构造出来的对象的原型对象。换句话说,有一个普通函数,当把它作为构造函数来使用时,它可以创建对象,而prototype指向它创建出来的对象的原型对象。//构造函数function Person() {}var person = new Person(); //构造函数创造的对象对象是没有prototype属性的。proto任意对象都有一个原创 2020-09-18 14:49:40 · 139 阅读 · 0 评论