- 博客(78)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 滚动视差动效实现
项目使用 ScrollMagic + TweenMax + Velocity + Animation.velocity + Swiper + Swiper.animate 实现的PC端效果；使用 ScrollTrigger + GSAP + Swiper + Swiper.animate + WowJs 实现的响应式效果；
2024-05-21 12:15:16
905
原创 Threejs实现3D飞行器交互场景
最近在b站上面看到up主：gamemcu的3D作品，着实让人感到非常震撼，作品中的SU7模型，利用的是Blender进行建模，利用了webGL的技术进行。由此启发了我对3D极大的乐趣。因此，凭借一点点🤏的前端知识水平，打算从Three.js开始入门3D。基于Three.js的模型交互，包括方向控制、颜色贴图、阻尼效果、TWEEN动画、JavaScript动画、CSS3过渡等效果
2024-04-19 00:50:30
935
原创 Vue插槽启示录：从Web组件到影子DOM
从书籍《JavaScript权威指南》中出发，探索Web组件、影子DOM、Vue自定义组件、Vue插槽的知识点。
2023-10-12 09:49:35
499
原创 基于JavaScript粒子流动效果
这是一个HTML文件，主要包含了一些CSS样式和JavaScript代码，用于创建一个动画效果。在CSS部分，定义了一些基本的样式，包括页面的背景颜色、位置、大小等。特别的，定义了两种球形元素（.ball_A 和 .ball_B）的样式，以及它们的动画效果。在JavaScript部分，定义了一个名为Ball的类，用于创建球形元素，并控制它们的运动。Ball类有一些方法，如random用于生成随机数，render用于渲染球形元素，update用于更新球形元素的位置。在页面加载时，会调用creatB
2023-09-03 23:14:58
1274
1
原创 基于JavaScript抛物线动画实现
基于JavaScript抛物线动画实现，实现了一个基于贝塞尔曲线的抛物线动画，这里使用到了三种表现形式：css的transition、css3的animation动画和JavaScript的requestAnimationFrame。
2023-09-03 22:35:29
477
原创 Element的Select分组全选模式
在一些业务场景中，我们可能需要让下拉选择，支持分组的同时，支持全选，Element中的Select支持分组，但不支持全选，Cascader 级联选择器支持分组，也支持全选，但是他的显示不在同一垂直方向。因此，去修改Select，是比较方便和有效的方法。
2023-06-07 20:22:03
2193
2
原创 Vuex源码分析，实现简易版的Vuex
vuex 是 Vue 配套的公共数据管理库，它可以把一些共享的数据，保存到 vuex 中，方便整个程序中的任何组件直接获取或修改我们的公共数据。使用Vuex的时候需要用到Vue的use方法，因此它的本质是一个插件。
2022-11-17 22:20:53
573
1
原创 手写简易VueRouter
路由是用来跟后端服务器进行交互的一种方式，通过不同的路径来请求不同的资源，请求不同的页面是路由的其中一项功能。VueRouter则是Vue的路由管理器
2022-10-29 22:17:55
604
原创 Ant Design中使用css切换问题记录
当想通过开关来控制主题颜色时，就必须控制css的变化，现就记录使用Ant Design切换主题过程中发现的一些问题。
2022-08-11 10:31:17
757
原创 Canvas绘制图形
由于 HTML5 Canvas 是一个图形工具，所以不用说它可以让我们绘制形状。我们可以通过我们设置的上下文使用许多不同的函数来绘制新的形状。fillRect绘制矩形、arc绘制圆形、圆弧、扇形等等
2022-04-20 14:42:30
1108
原创 从moveTo到lineTo，画出Canvas的第一条线
Canvas是H5新增的一个标签, 我们可以通过JS在这个标签上绘制各种图案Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。
2022-04-20 13:20:20
1335
原创 利于contenteditable封装简易的富文本编辑
contenteditable 属性指定元素内容是否可编辑。这是富文本编辑的基础，利于div的contenteditable 属性，可以创造各种文本编辑功能。
2022-04-08 16:18:07
384
原创 React中的路由(react-Router)基本配置
路由配置是一组指令，用来告诉 router 如何匹配 URL以及匹配后如何执行代码。React中的路由(react-Router)基本配置
2022-03-16 13:56:51
4226
原创 高频Javascript面试手写
实现一个事件委托function delegate(element, eventType, selector, fn) { element.addEventListener(eventType, e => { let el = e.target while (!el.matches(selector)) { if (element === el) { el = null
2022-03-08 11:29:10
356
原创 实现一个Message组件，满足弹出消息通知、关闭消息通知
组件方式实现，transition中的appear，作用是使动画能在页面加载时，就可以自动动画过渡<template><transition name="move" appear> <div class="message" v-if="visible"> <span>{{message}}</span> <span class="close" @click="closeMessage">X</span.
2022-03-08 11:01:31
810
转载 JavaScript隐式转换注意事项
在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型
2021-11-18 17:00:00
110
原创 JavaScript操作数组方法
记录Javascript中常用的操作数组的方，如：push 、 pop、unshift、 shift、reverse、sort、joni、filter、map、reduce、slice、splice、concat、indexOf、some、every
2021-11-15 09:57:43
323
原创 Vue响应式原理(defineProperty)
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。Vue通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法） 实现数据劫持
2021-11-10 17:32:48
2823
原创 JavaScript实现事件委托
事件流分为三个阶段，依次为捕获阶段(父->子)、目标阶段、冒泡阶段(子->父)，事件触发顺序为捕获阶段–目标阶段–冒泡阶段；平时给元素绑定事件一般是直接写到属性上（即0级事件处理程序）或是addEventListener()监听事件（2级事件处理程序）。但有些应用场景以上方法可能不太管用，比如给后来动态添加的元素绑定事件监听。这时就可以使用事件委托了（也叫事件代理）。事件委托简单通俗理解就是，给外层元素绑定事件，然后利用事件冒泡，针对当前触发的元素执行相应的函数。 <ul
2021-11-09 17:58:01
584
原创 Vue+Element一步步实现动态添加Input_输入框
根据，老粉最近做的一些关于动态添加Input的需求，在这里总结几种用Vue+Element动态添加Input_输入框实现方案、解决单选转换多选无法清除数据、多数据渲染下拉框卡顿问题
2021-11-09 11:27:34
27299
7
原创 javaScript实现去重的几种方法
基本数据let arr = [1,2,3,4,1,5,5,'a','d','b','b'];利用ES6的setlet setArr = [...new Set(arr)];console.log(setArr);利用双指针var removeDuplicates = function(nums) { const n = nums.length; if (n === 0) { return 0; } let fast = 1, slow = 1;
2021-09-06 17:59:54
574
1
原创 js的几种继承方式
继承是面向对象软件技术当中的一个概念，与多态、封装共为面向对象的三个基本特征。继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法。这里记录了js中的几种继承方法
2021-06-11 10:30:33
150
1
原创 vue之mixin使用
在看uniapp的组件源码时，偶然发现官方在组件中使用到了【mixin】，在这记录一下【mixin】的理解和使用混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。...
2021-06-04 18:07:21
338
原创 vue实现自定义element组件库
element是个优秀的vue组件库，不仅组件类别齐全，同时满足开发者、设计师和产品经理需求的网站快速成型工具，而且它代码实现也很值得去学习的。因此，如果想要搭建一个自己的组件库，element的组件实现方式可以借鉴来用。element官方组件库的部分源码 ，如下图所示：1、创建组件文件在自己的项目中创建自己组件文件，一个组件功能，放一个文件夹中。2、配置index.js的install在组件文件下的index.js中配置install(如上图的index.js文件路径为..
2021-04-26 15:28:57
988
1
原创 uniapp的progress加载进度条使用
percent：绑定百分比，从0%到100%show-info：在进度条右侧显示百分比stroke-width：进度条线的宽度，单位pxactive：进度条从左往右的动画active-mode：forwards：动画从上次结束点接着播(用于实时加载)backgroundColor：未选择的进度条的颜色<view class="progress-box"> <progress :percent="percent" show...
2021-03-31 16:02:31
5900
2
原创 uniapp自定义tabBar
uniapp自定义tabBar方案该方案解决的问题有：1、不在同一个页面切换组件，可路由跳转，刷新页面显示该路由下的页面信息2、首次
2021-03-25 13:01:31
58948
57
原创 【Vue-Vant】Checkbox复选框--案例分析
多选和全选是复选框中的基本组成部分，复选框用于在选中和非选中状态之间进行切换。在很日常场景中都是很常见的，这里是个小案例，记录平时复选框的运用
2021-01-22 17:12:32
15029
3
原创 【elementUI】DatePicker时间选择器范围限定
在前端开发中，很多时候都需要到时间选择器来限定时间的选择范围。比如在12306上买票，时间的限定是30天，而且是当前日期开始，那么这样的事件限定，在前端中是如何实现的呢？这里就elementUI的时间选择器来做一个类似12306上的时间选择器
2021-01-21 17:16:51
7368
1
原创 【vue】对象根据key获取value以及根据value获取key
准备数据 data(){ return { obj:{ '001':'a', '002':'b', '003':'c', '004':'d' } } }, 1、遍历对象获取所有的key和valuefor (let k in this.obj){ console.log(k
2021-01-13 15:58:01
20636
原创 Javascript中的every()与some()的区别和应用
every()定义和用法every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。every() 方法使用指定函数检测数组中的所有元素：如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测。 如果所有元素都满足条件，则返回 true。注意：every() 不会对空数组进行检测。注意：every() 不会改变原始数组。isEvery:function(){ let a = [2,3,5,7,9] le...
2020-12-08 16:10:32
1418
原创 Vue+Element实现时间日期范围限定的两种方式
Element提供了时间日期选择器的UI组件，那么如去限制起止时间呢？这里提供两种方式。
2020-11-27 13:38:47
4014
2
原创 【vue】Vue Router路由组件传参的几种方式
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。通过props将组件和路由解耦，使得该组件更易于重用和测试
2020-11-25 15:16:39
1881
原创 uni-app使用第三方UI组件库的引入方式(ThorUI)
最近使用uni-app做开发，使用到了第三方UI组件库，记录一下引入第三方框架的步骤
2020-10-26 11:40:06
5537
1
转载 【JavaScript】使⽤正则表达式把字符串中的占位符替换成 对象的对应属性值
/*把字符串 numString ="my name is ${name},l like ${hobby}" * 根据数据 numArray = {name:"tom",hobby:"coding"} * * 转换成 theString = "my name is tom,l like coding" * */
2020-09-25 11:49:34
938
原创 【JavaScript】根据当前时间获取当前周的开始,结束时间(周一到周日)
【JavaScript】计算当前所在的一周开始时间戳及结束时间戳(周一为一周的第一天)
2020-09-25 10:12:27
2473
原创 轮播利器Swiper设置为loop模式时遇到的问题
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。
2020-09-11 18:23:22
8623
3
jquery点击图片--全屏弹窗效果
2020-04-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人