![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
原生JS
文章平均质量分 76
记得抬头微笑
记得抬头微笑
展开
-
CSS+ JS 实现手电筒效果
JavaScript 结合 CSS 打造的一款图片特效,当鼠标拖拽滑块时,让本该置灰的图片局部恢复本来的颜色。且该效果随着你的鼠标的按下时的移动而移动。原创 2023-03-24 10:31:10 · 906 阅读 · 0 评论 -
前端实现登录拼图验证
不知各位朋友现在在 web 端进行登录的时候有没有注意一个变化,以前登录的时候是直接账号密码通过就可以直接登录,再后来图形验证码,数字结果运算验证,到现在的拼图验证。这一系列的转变都是为了防止机器操作,但对于我们来说,有亿点麻烦,但也没办法呀。今天我们也一起实现一个拼图验证。原创 2023-01-17 15:17:17 · 8282 阅读 · 5 评论 -
Vue 实现拖拽模块(五) - 下 预览元件
本文主要介绍了预览元件数据,并根据配置事件去触发逻辑,具体如下:原创 2023-01-04 10:55:20 · 609 阅读 · 0 评论 -
Vue 实现拖拽模块(五) - 上 定义元件的触发事件
本文主要介绍了选中元件后配置元件的事件,同时支持配置触发方式、事件类型、事件参数(演示参数,可拓展...)原创 2023-01-03 15:47:49 · 1005 阅读 · 2 评论 -
Vue 实现拖拽模块(四)拖拽元件位置
本文将继续给大家分享如何拖拽改变 元件位置,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下原创 2022-12-29 18:50:54 · 2236 阅读 · 5 评论 -
Vue 实现拖拽模块(三)自定义拖拽组件的样式
本文主要介绍了 Vue 自定义拖拽组件的样式,元件支持通过右侧的属性样式配置元件的样式原创 2022-12-09 16:13:06 · 3810 阅读 · 3 评论 -
Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了 [拖拽添加组件](https://blog.csdn.net/qq_40146638/article/details/127686169) 的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下原创 2022-11-17 11:40:16 · 5604 阅读 · 7 评论 -
Vue 实现拖拽模块(一)拖拽添加组件
本文主要介绍了vue拖拽组件实现构建页面的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下。原创 2022-11-04 15:09:36 · 6365 阅读 · 0 评论 -
原生实现滑块解锁功能(简易版本)
本文实例为大家分享了 js 实现简单滑动解锁功能,供大家参考,具体内容有解锁功能、重置功能、进度条功能、结果提示功能、随机生成滑块位置。原创 2022-10-13 15:07:31 · 1320 阅读 · 0 评论 -
【初 / 中级前端面经】中小型公司面试时都会问些什么?
面经原创 2022-07-21 15:47:07 · 587 阅读 · 0 评论 -
使用 Fragment ,实现 Vue 的模板编译
Vue会把用户在template标签中写的内容进行编译,找出原生的html和非原生的html内容,经过处理生成Fragment,而Fragment会经过patch过程从而得到将渲染的视图中的Fragment,最后根据Fragment创建真实的DOM节点并插入到视图中,最终完成视图的渲染更新。AFragment是原生JS的一种创建文档片段的方法,如果我们对根元素中的每个元素做逐个处理的话,这会引起很大的性能问题,会多次触发浏览器的回流和重绘。......原创 2022-07-18 16:13:18 · 714 阅读 · 0 评论 -
Object.defineProperty 的用法
Object.definePropety() 的使用以及二次封装原创 2022-07-09 15:51:26 · 675 阅读 · 0 评论 -
彻底掌握 Promise - 原生 Promise.catch 的实现(七)
@[TOC](彻底掌握 Promise - 原生 Promise.catch 的实现(七))前言在之前的文章中我们实现了简易版本的 Promise 以及它的大部分原生方法提示:以下是本篇文章正文内容,下面案例可供参考Promise.catch 方法实现起来比较容易理解,所以本文中的描述可能较少Promise.catch 的实现在 Promise 内部使用 static 关键字定义一个静态方法catch 方法接收一个失败的函数作为参数创建一个 Promise 对象,调用失败的 r原创 2022-05-17 11:30:12 · 502 阅读 · 0 评论 -
使用CSS变量实现切换主题
使用CSS变量实现切换主题什么是 CSS 变量具体实现主要逻辑light 文件drak 文件使用变量效果参考drak 模式light 模式什么是 CSS 变量在 CSS 中,在整个代码中重复使用单一颜色或文本大小是很普遍的,这意味着在整个文档中多次重复使用相同的颜色或文本大小。 使用 CSS 变量,可以将颜色或文本大小值分配给变量,并在多个位置使用。 与使用传统 CSS 值相比,这使更改值更容易并且更方便。如果不懂 CSS 变量 的话可以去看 这篇文章 CSS 变量具体实现创建两个保存不同原创 2022-04-28 16:21:14 · 1078 阅读 · 0 评论 -
彻底掌握 Promise - 原生 Promise.finally 的实现(六)
目录前言一、finally的使用方法具体使用方法执行结果二、实现原理三、具体实现总结前言在 [\[ 彻底掌握 Promise - 原生 Promise.all 的实现(四)\]](https://blog.csdn.net/qq_40146638/article/details/123813571) 中我们已经实现了 Promise 的 all 方法,下面这篇文章,主要讲述 Promise.finally 方法的实现。finally()方法返回一个Promise。在promise结束时,无论结果是原创 2022-04-22 11:47:46 · 3180 阅读 · 0 评论 -
彻底掌握 Promise - 原生 Promise.resolve 的实现(五)
目录前言一、resolve 的使用方法语法参数返回值示例1: 普通类型的调用示例1:执行结果示例2: 传入一个 Promise 对象示例2:执行结果二、实现原理三、具体实现总结前言在 [\[ 彻底掌握 Promise - 原生 Promise.all 的实现(四)\]](https://blog.csdn.net/qq_40146638/article/details/123813571) 中我们已经实现了 Promise 的 all 方法,下面这篇文章,主要讲述 Promise.resolve 方法原创 2022-04-18 16:17:51 · 1711 阅读 · 2 评论 -
CSS变量的声明和修改
CSS变量的使用CSS变量描述CSS变量的声明CSS变量的使用CSS变量的修改CSS变量描述复杂的网站都会有大量的 CSS 代码,通常也会有许多重复的值。举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它。CSS变量的声明CSS 变量的声明一般都是在根元素上面声明,确保根元素下的所有元素都可以访问到这个CSS 的自定义属性。这里根元素使用 :root 来表示,也可以在其他原创 2022-04-15 15:56:08 · 1955 阅读 · 0 评论 -
彻底掌握 Promise - 原生 Promise.all 的实现(四)
在 Promise 中内置了一些静态方法可以供我们更好的去处理异步操作,比如Promise.all语法 Promise 接收一个可迭代对象作为参数,也就是 Array、Set的数据结构,并且只返回一个Promise 的实例,返回结果是一个数组,数组包含了所有的回调结果。说明 此方法在集合多个 promise 的返回结果时很有用。 完成(Fulfillment): 如果传入的可迭代对象为空,Promise.all会同步......原创 2022-03-29 11:31:53 · 1295 阅读 · 0 评论 -
彻底掌握Promise-原生Promise的实现(一) Promise 的简易版本
Promise简介 在ES6(ES2015)正式发布时中,Promise被列为正式规范,作为ES6中最重要的特性之一。 Promise的出现主要是为了解决回调地狱问题,通过调用.then方法逐层去向下调用 Promise 对象有以下两个特点:1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:pending: 初始状态,不是成功或失败状态。 fulfilled: 意味着操作成功完成。 reject......原创 2022-03-21 16:58:47 · 745 阅读 · 4 评论 -
彻底掌握 Promise - 原生 Promise 的实现(三) 将then方法的回调函数变成可选参数
在 [ 彻底掌握 Promise-原生Promise的实现(二) ] 中我们在 Promise 简易版本的基础上,实现了 Promise 的链式调用和 Promise 执行过程中对函数执行的异常情况的处理。下面我们思考一个问题:如果 Promise 一直调用 then 方法不给他传递任何的回调函数的话,那么我们通过 resolve / reject 传入的值,会被第一个 then 方法获取到? 还是会被最后一个 then 方法获取到这个 resolve 中返回的值呢?......原创 2022-03-25 16:20:10 · 514 阅读 · 0 评论 -
JS 获取图片的实际大小
根据图片链接获取图片大小,width/heightlet image = new Image() image.onload = function() { let width = image.width let height = image.height let fileSize = image.fileSize console.log(image)原创 2022-07-25 18:02:21 · 5459 阅读 · 0 评论 -
彻底掌握 Promise-原生Promise的实现(二) Promise的链式调用
在 彻底掌握 Promise- 原生 Promise 的实现(一)已经初步实现了 promise 的简易版本,这距离实现完整版本的 Promise 还有一段距离,下面我们将在简易版本的基础上增加Promise 的链式调用 异步情况下 Promise 的链式调用 处理函数执行的异常情况以下代码都是对简易版本 Promise 去实现的,所以这里只显示变更的地方,完整版本在文末贴出Promise 的链式调用 下面我们依然还是通过逆解析的方式去通过 Promise 的链式调用的用法.....原创 2022-03-23 16:26:29 · 5892 阅读 · 0 评论 -
JS中的浅克隆与深克隆
JS中的克隆原创 2020-10-15 16:04:37 · 429 阅读 · 4 评论 -
ES6的reduce用法
1. 求和数组(基本用法)let list = '12345'.split('')const total = list.reduce((val, oldVal) => val + oldVal)console..log(total) // 152. 去重数组原创 2020-08-24 18:27:51 · 7180 阅读 · 0 评论 -
JS的变量声明方式以及区别类型
目录 JS的数据类型 JS的变量JS的数据类型1.String(字符串)2.Number(数值)3.undefined(表示未找到)4.null(空值)5.Boolean(布尔值 true/false)6.Object(对象)7.Symbol(ES6新增 表示一个唯一的值/标识)JS的变量声明方式变量的概念:变量是存储数...原创 2020-06-22 17:55:54 · 297 阅读 · 0 评论 -
JS通过原型链检测变量所属类型
1.Object.prototype.toString.call(a) // 所有类型都能判断 返回值为 [object type]Object.prototype.toString.call('An') // "[object String]"Object.prototype.toString.call(1) // "[object Number]"Object.prototype.t...原创 2020-06-22 17:54:24 · 312 阅读 · 0 评论 -
Vue在同一个页面的组件中向页面的URL增加参数
动态改变Vue中url的参数原创 2020-06-22 17:51:02 · 4332 阅读 · 1 评论 -
原生JS数组去重的多种方式
数组去重的方法原创 2020-01-08 15:26:44 · 476 阅读 · 0 评论 -
多维数组去重排序的简单方法
多维数组指的就是一个数组中包含多个数组原创 2020-01-07 10:22:26 · 726 阅读 · 0 评论 -
JS变量的多种声明方式和区别
JS变量的声明变量的概念:变量是存储数据值的容器。原创 2019-12-26 15:45:06 · 2626 阅读 · 0 评论 -
JS字符串的常用方法
常用字符串的方法1.str.charAt(1) 从一个字符串中返回指定位置处的字符let str = 'hello world'charAt()从一个字符串中返回指定位置处的字符 参数1: 下标 返回值: 下标位置处的字符 超出字符串长度返回空字符str.charAt(1) // String e // 从下标为1的位置返回它的值2.str.ch...原创 2019-12-24 18:40:31 · 168 阅读 · 0 评论 -
原生JS数组的常用方法 + 参数和返回值详细解释
JS中数组的常用方法包括ES6新增的方法原创 2019-12-24 16:47:25 · 593 阅读 · 0 评论