![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
原生js
文章平均质量分 52
分享原生js相关的内容、前端基础中的基础,非常重要的一部分.
不知名前端
恢复更新
展开
-
js万能类型检测Object.prototype.toString.call——定制Object.prototype.toString.call的检测结果
要说这个知识有什么用,在什么场景可以用,可以说基本上是用不上。但是可以了解我们这些常用的方法,到底是什么原理,为什么会有这样的结果。在日常中遇到问题的时候,更能得心应手的排查问题。甚至优化自己的代码。原创 2023-02-10 16:44:44 · 2150 阅读 · 4 评论 -
moment.js的实用方法记录
一、获取时间戳1、获取当前时间戳moment(new Date()).valueOf();等效于:Date.now();2、获取任意时间时间戳// 年月日,任意格式,第二个参数对时间格式进行说明moment('2022-01-02', 'YYYY-MM-DD').valueOf()moment('20220102','YYYYMMDD').valueOf()moment('2022/01/02', 'YYYY/MM/DD').valueOf()// 时分秒,任意格式,同上, 当省略年原创 2022-04-11 14:10:55 · 1520 阅读 · 0 评论 -
js实现影视级滤镜效果,lut3d的前端实现
前端实现滤镜有几种方式,比如css的filter、webgl、svg等等, 其中css和svg可以实现低维度滤镜,优点是简单,方便, 无性能问题. webgl可以实现多维度滤镜, 其中选择可以自己纯手工的去撸各类滤镜算法,也可以使用现成的工具库再手动拼凑, 但是对于不懂webgl的同学来讲,着实有点麻烦. 今天分享一个基于canvas实现的影视级滤镜的方法.lut3d想要讲清楚滤镜是怎么回事,并不是一件容易的事情. 里面涉及到了一些概念性的东西. 这里也不得不来简单介绍一部分内容.首先我们先来了解一下原创 2022-03-22 18:41:10 · 3070 阅读 · 4 评论 -
wands一个轻松实现音视频播放控制的库
前言随着短视频业务越来越火爆,很多公司都想在这个赛道争一口饭吃, 作为开发者来说, 当第一次接手音视频项目的时候,包括我在内的很多人都是表示非常的头大, web上充斥着各种教程,各种api应接不暇, 中间也有着实不少的坑在等着我们.所以我就想利用业余时间,将工作中的一些方案,抽象出来分享给大家.wands这是一个针对h5原生video, audio标签的一个扩展功能库,体量也很小, 对于不熟悉音视频API, 可以说是一个比较方便的选择.目前还不是特别完善,后期会逐步添加新的功能,逐步将它打造成一个可以原创 2021-06-20 14:16:01 · 151 阅读 · 0 评论 -
如何开发npm包,并发布到npm的详细介绍
从来没有正式的去从头到尾的完整开发过一个npm包.所以这个周末,我突然来了兴趣,对原生video,audio的API以及原生事件写了一个扩展类,并发布到npm.整个过程可以说还是挺蛋疼的.这里分享一下一、github创建项目仓库第一步,从创建项目仓库开始,先去github按照步骤创建npm包的项目虽然我知道99%的人都会,但是为了和我一样不会的同学,还是截了一张图需要填个名称:repository name然后选择add a README选择Add .gitignore ———> 继续输原创 2021-06-19 22:07:25 · 1246 阅读 · 0 评论 -
js取到顶层对象的几种方式
前言众所周知,js是一门脚本语言,它依赖浏览器作为自己的执行环境.但是并不是只有浏览器可以作为js的执行环境,所以,浏览器提供的一些api,addr或者是顶层对象(window),在非浏览器的环境下,就无法使用了.那么这里我将记录几种在浏览器中可以获取到顶层对象的方式.因为作者的工作仅限于浏览器环境的开发,所以这里只做记录,并不会给出兼容方案.后续当作者了解了详细情况,再进行更新1、window2、this3、self4、top5、globalThis暂时作为记录,后面会了解各种方式的优缺点,原创 2021-04-03 16:19:35 · 1332 阅读 · 0 评论 -
JSON.stringify的妙用,批量删除object的属性
说这个功能其实只是要分享JSON.stringify的第二个参数,先看例子omit—根据obj的key,批量保留或是删除对应的属性// 目标对象const example = { name:"不知名前端", age:18, height:180, weight:150, sex:'boy',}// 保留属性集合const keepAddr = ['age','name','height'];// 删除属性集合const deleteAddr = ['height','sex','原创 2021-03-31 21:55:03 · 1437 阅读 · 0 评论 -
js实现文件上传、文件预览、拖拽上传的方法
一、文件上传1、上传的html我们可以使用input实现文件上传<input type="file" id="upload">2、访问上传的文件通过dom访问const input = document.querySelector("#upload");const files = input.files;通过onchange事件访问const input = document.querySelector("#upload");input.addEventListener(原创 2021-03-29 00:03:45 · 17514 阅读 · 7 评论 -
js实现录音功能,页面title上的小红点如何去掉
前言在解决这个问题之前,如果你想了解js如何实现录音功能,请看我的另一片博客:https://blog.csdn.net/yun_master/article/details/114550332?spm=1001.2014.3001.5501title上的小红点是什么当你获取了用户的录音权限之后,每次进入到这个录音页面,你都会发现这个小红点.当然这也不是太大的问题.不过当你遇到一个比较钻牛角尖的测试,或者是交互,抑或是pd.此时这个问题,就有可能成了你最头疼的问题.下面我们来解决一下这个问题解决原创 2021-03-27 14:19:49 · 1242 阅读 · 0 评论 -
h5页面如何实现阻止关闭页面,或阻止刷新页面
页面拦截(beforeunload事件) window.addEventListen(“beforeunload”,(e) => { const message = '即将离开当前页面,确认吗??' e.returnValue = message; return message; })原创 2021-03-27 13:57:45 · 3423 阅读 · 0 评论 -
h5页面实现开启真全屏模式,兼容版本
这篇文章将会分享一种具有良好兼容性的js全屏方法全屏// 兼容配置const fullScreenMap = { fullscreenchange:"fullscreen", webkitfullscreenchage:"webkitIsFullScreen", mozfullscreenchange:"mozFullScreen", msfullscreenchange:"msFullscreenElement",}const html = document.documentEleme原创 2021-03-27 13:44:50 · 582 阅读 · 0 评论 -
js中.?、??、??=的用法和含义
前言在项目中我们往往要做很多很多的空值判断进行容错处理,往往伴随着三目运算、与或、if else来使用,不仅要写很多冗余的代码,后期维护起来也是满屏的if else可以说是非常的痛苦了.今天分享几个处理空值简单的方法,希望可以解决大家的一些问题.可选链(.?)如果一个值为null、或者是undefined.那么我们再去用点操作符去调用一个方法或者访问一个属性会发生什么?let a;let b = a.name;如果是上面的这样的代码,那么我们能得到一个报错其实这种情况就相当于直接在unde原创 2021-03-19 21:12:45 · 72237 阅读 · 29 评论 -
js实现输入长度的限制,兼容中文输入的办法
复合输入的长度限制我们在项目中,可能会经常遇到输入框输入汉字 + 字母/符号等混合内容,并要对内容进行长度限制的需求.很多朋友喜欢直接对拿到的输入的value进行长度限制,但是实际做过的朋友可能都会遇到问题,当输入中文、日文这种需要多个字母拼成一个文字的语言时,往往文字没有输入完成,拼写的文字就已经超出长度的限制了.从而导致,无法输入;为了要解决这个问题,需要知道,用户正在输入的文字是否是复合输入.如果是复合输入,我们要想办法监听复合输入的结果,而不是输入的过程.如果是非复合输入,我们只需要监听o原创 2021-03-09 23:45:17 · 1267 阅读 · 0 评论 -
js获取光标覆盖选中区域文本
window.getSrelection()通过getSelection方法,可以获取Selection对象,并通过toString方法,获取所选中的文本内容;鼠标选中时,需要借助mouseup事件来作为收集参数的时机// 获取需要得到文本的目标容器const targetContainer = document.querySelector("#root");const selection = () => { // 获取selection对象 const objSelection = w原创 2021-03-08 23:27:18 · 442 阅读 · 0 评论