自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(98)
  • 资源 (5)
  • 收藏
  • 关注

原创 js 手写promise

这是一个自定义实现Promise类的代码示例。通过定义PENDING/FULFILLED/REJECTED三种状态,实现了Promise的核心功能:构造函数接受executor函数、状态变更机制、then方法的链式调用。代码展示了如何处理同步/异步操作的成功和失败回调,包括状态透传、错误捕获和返回值传递等Promise特性。通过与原生的Promise进行对比测试,验证了自定义实现的正确性。该实现涵盖了Promise的基本功能,可以作为理解Promise工作原理的参考。

2025-05-28 20:06:36 331

原创 js class转funtion写法

文章摘要:本文对比了ES6类(Class)与传统构造函数的区别。类通过constructor定义初始化逻辑,方法直接定义在类体中。关键差异在于:1)类自动启用严格模式;2)必须通过new调用,否则报错;3)消除了函数调用的二义性。示例代码展示了如何用传统构造函数模拟类的严格new调用限制(通过new.target检测)。这体现了类语法对面向对象编程的规范化改进。(148字)

2025-05-27 19:33:35 94

原创 js 实现多并发任务处理

本文实现了一个支持并发控制的SuperTask任务队列类。该类的核心特点是:1) 通过构造函数设置最大并发数;2) 提供add方法添加异步任务;3) 内部run方法实现任务调度,确保同时运行的任务不超过最大并发数。代码示例展示了5个不同耗时的任务按2个并发执行的场景,验证了任务完成的正确时序(如任务1和2同时开始,任务2先完成等)。该实现可用于需要控制并发数量的异步任务管理场景。

2025-05-27 18:39:45 276

原创 js结合flip动画实现拖拽排序功能

这段代码实现了一个可拖拽的列表功能。通过HTML、CSS和JavaScript结合,用户可以拖动列表项来重新排序。列表项在拖动时会显示灰色背景,并在拖动过程中通过translateY实现平滑的过渡效果。代码主要分为以下几个部分: HTML结构:包含一个div容器,用于显示列表项。 CSS样式:定义了列表项的外观,包括背景色、圆角、字体等,并为拖动状态添加了特殊样式。 JavaScript逻辑: 数据渲染:根据数据动态生成列表项,并设置可拖拽属性。 拖拽事件处理:通过ondragstart、ondragent

2025-05-23 14:23:42 85

原创 js拖拽事件实现简单选课功能

这段HTML代码展示了一个课程表布局,结合了CSS样式和JavaScript拖拽功能。页面背景为绿色,包含一个左侧的课程列表和一个右侧的课程表。左侧列表中的课程项(如语文、数学等)设置为可拖拽,右侧课程表分为上午和下午两个时间段,以及星期一到星期日的日期。课程表区域使用Flex布局,确保内容居中显示。通过JavaScript的拖拽功能,用户可以将左侧的课程项拖拽到右侧的课程表中,实现课程安排。整体设计简洁,功能明确,适合用于课程管理或时间表规划的场景。

2025-05-22 17:53:09 526

原创 css实现不确定内容的高度过渡

本文介绍了实现鼠标悬浮按钮时,文本框高度过渡展开的几种方法。首先,通过CSS设置按钮和文本框的样式,并使用JavaScript监听鼠标事件来控制文本框的展开与收起。文章详细分析了五种实现思路:1) 直接设置height: auto,但过渡效果无法实现;2) 使用max-height,但存在过渡时间不准确和移出效果受影响的问题;3) 通过JavaScript动态计算并设置高度,实现平滑过渡;4) 使用interpolate-size,但兼容性较差;5) 使用calc-size(auto, size),同样存在

2025-05-18 00:41:24 395

原创 css实现选中图片四角边框效果

本文展示了一个利用CSS mask 属性实现的动态相册查看效果。通过定义.pointer类,使用conic-gradient和calc函数动态生成一个带有透明边框的矩形框,当鼠标悬停在图片上时,矩形框会根据图片的位置和大小动态调整。mask属性通过设置四角透明效果,使得边框在视觉上更加突出。此外,JavaScript用于监听鼠标事件,实时更新矩形框的位置和大小。这种设计巧妙地将CSS和JavaScript结合,实现了动态且美观的用户交互效果,适用于图片展示类网页。

2025-05-18 00:32:23 105

原创 FLIP动画

该代码实现了一个简单的DOM元素排序动画效果。首先,通过getPositions函数记录元素的当前位置。然后,在renderList函数中,改变DOM结构并记录元素变动后的位置。接着,计算每个元素的偏移量,将其移动到原始位置,营造页面未变化的假象,尽管DOM结构已改变。最后,通过requestAnimationFrame为元素添加过渡效果,使其平滑地过渡到新位置。点击“排序”按钮时,数据顺序反转,重新渲染列表并触发动画。整个过程展示了如何通过记录和计算位置变化来实现平滑的DOM元素过渡动画。

2025-05-17 15:19:45 231

原创 抛物线运动路径动画实现

本文介绍了如何使用JavaScript和CSS实现一个模拟抛物线运动的动画效果。通过点击按钮,创建一个圆形元素(父容器)和一个黑色小球(子元素)。父容器横向移动,子元素纵向移动,通过transform属性控制位移。为了实现抛物线效果,父容器的过渡使用线性函数,而子元素使用cubic-bezier(0.5, -0.5, 1, 1)时间速度曲线函数,模拟抛物线运动轨迹。代码中还通过强制回流确保动画流畅。最终效果展示了父容器和小球按照抛物线路径移动的动画。

2025-05-16 16:20:42 299

原创 歌词滚动效果

这段代码实现了一个简单的音乐播放器页面,背景为黑色,文字为白色。页面顶部展示了歌曲信息,包括歌手头像、歌曲名称和音频播放器。音频文件通过<audio>标签加载,并自动播放。歌词部分通过JavaScript动态生成,并根据歌曲进度实时滚动。歌词的每一行通过<div>元素展示,并设置了过渡效果,当前播放的歌词会放大并改变颜色。页面通过CSS布局,使用Flexbox实现头部和内容区域的排列,确保页面在不同设备上自适应。整体设计简洁,功能集中在音乐播放和歌词同步上。

2025-05-14 22:39:03 823

原创 transform 3d学习&简单示例

【代码】transform 3d学习&简单示例。

2025-03-28 19:23:35 352

原创 git stash

git stash 详解

2024-07-04 10:44:49 437

原创 实现鼠标滚轮放大缩小元素,鼠标移动带动元素移动从而调整元素位置

【代码】实现鼠标滚轮放大缩小元素,鼠标移动带动元素移动从而调整元素位置。

2024-05-31 11:22:16 326

原创 css实现元素内容过高时自动出现展开收起按钮

css实现元素内容过高时自动出现展开收起按钮。

2024-05-06 15:04:07 653

原创 npm报错 cb() never called!

解决:

2024-04-29 11:04:27 574 1

原创 React-实现循环轮播

问题:写字体轮播的时候,不使用swiper库,使用top定位,让字体过渡上下移动,发现写成的效果就是每次播到最后一个元素后,只能突然展示第一个元素,失去了那种上下移的动过渡效果。

2023-09-14 16:16:35 1091

原创 fontfaceobserver 第三方字体加载优化方案

【代码】fontfaceobserver 第三方字体加载优化方案。

2023-08-08 19:07:27 1580

原创 Mac 谷歌浏览器选中查看悬浮出现的元素样式

(4) 通过鼠标选中浮层中的元素即可查看元素的样式信息。(3)按住快捷键command + \,页面暂时。(2)鼠标选中下载,让面板悬浮出来。command + \或F8。(1)打开控制台,选中源代码。

2023-07-14 16:44:16 2500

原创 mac 配置git命令别名

【代码】mac 配置git命令别名。

2023-04-12 16:01:34 492

原创 React class组件和hooks setState异步更新数据详解

React class组件和hooks setState异步更新数据详解

2023-04-06 20:05:59 1580

原创 解决npm无法卸载create-react-app

create-react-app

2022-07-21 15:49:26 1426

原创 React-长列表-懒加载-虚拟列表

虚拟列表

2022-07-19 18:53:19 1285

原创 百度开发平台 access key获取步骤

用Echart.js画图,结果地图一直出不来,后来看文档发现需要百度云的access key。于是去搜了半天才找到,步骤如下:(1)https://cloud.baidu.com/到百度智能云官网,注册登陆(2)点头像用户中心,进入用户中心(3)点击头像-安全认证(3)然后你就可以看到自己的access key了。(4)Echarts网页中使用<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.

2021-12-06 16:19:59 3065

原创 d3-selection (DOM操作相关API)

d3-selection (DOM操作相关API)Selections 允许强大的数据驱动文档对象模型 (DOM): 设置 attributes, styles, properties, HTML 或 text 内容等等。使用 data join 的 enter 和 exit 选择集可以用来根据具体的数据 add 或 remove 元素。1.selection选择器根元素: document.documentElement2.selectAll(selector)参数为css选择器,例如标签选择

2021-09-27 10:46:05 417

原创 svg-剪切和遮罩

svg-剪切和遮罩1.剪切<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clipPath id="cut-off-bottom"> <rect x="0" y="0" width="100" height="100" stroke="black" fill="pink"/&g

2021-09-14 15:16:35 417

原创 svg-基础变形

svg-基础变形1.元素作用:把属性赋给一整个元素集合<g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /></g>2.SVG嵌在SVG内部比之HTML,SVG允许你无缝嵌入别的svg元素。因此你可以利用内部svg元素的属性viewBox、属性width和属性height简单创建一个新的坐

2021-09-14 14:46:52 458

原创 svg-patterns(图案)

svg-patterns在pattern元素内部你可以包含任何之前包含过的其它基本形状,并且每个形状都可以使用之前学习过的任何样式样式化,包括渐变和半透明。<?xml version="1.0" standalone="no"?><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="Grad

2021-09-14 13:55:38 369

原创 svg-渐变

svg-渐变1.线性渐变<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/>

2021-09-13 16:07:04 363

原创 svg-fill,stroke(填充与边框)属性

svg-fill,stroke属性fill属性设置对象内部的颜色,stroke属性设置绘制对象的线条的颜色。fill:填充色fill-opacity:填充的透明度stroke:边框,即线条,设置其颜色stroke-width:设置描边的宽度。注意,描边是以路径为中心线绘制的,在上面的例子里,路径是粉红色的,描边是黑色的。如你所见,路径的每一侧都有均匀分布的描边。stroke-opacity: 边框透明度stroke-linecap:绘制描边的方式。1.butt用直边结束线段,它是常规做法

2021-09-13 11:38:09 8094

原创 svg-基本形状

1.矩形x:矩形左上角的x位置y:矩形左上角的y位置width:矩形的宽度height:矩形的高度rx:圆角的x方位的半径ry:圆角的y方位的半径 <rect x="10" y="10" rx="50" ry="10" width="100" height="100" stroke="black" fill="transparent" stroke-width="5"/>rx和ry是设置用来圆角的,默认为0;2.圆形<circle cx="25" cy="75"

2021-09-13 11:06:24 771

原创 svg viewBox和视口比例不匹配-preserveAspectRatio属性详解

1.viewBox属性svg width和height:最终显示的区域viewBox:画图的地方最终就是吧viewBox里面所画的图按照相应的规则拉伸在svg的区域显示2.preserveAspectRatio属性preserveAspectRatio="alignment [meet|slice]"第一个参数alignment(viewBox和视口的对齐方式)取值如下:第二个参数取值:meet 说明符在图形超出视口时候会对图形适当缩小调整适配可用的空间slice 说明符直接裁剪超出视

2021-09-09 14:56:11 1500 2

原创 css 中用来表示颜色的属性和方法

CSS 中的颜色可以通过以下方法指定:十六进制颜色带透明度的十六进制颜色RGB 颜色RGBA 颜色HSL 颜色HSLA 颜色预定义/跨浏览器的颜色名称使用 currentcolor 关键字1. 十六进制颜色#p1 {background-color: #ff0000;} /* 红色 */#p2 {background-color: #00ff00;} /* 绿色 */#p3 {background-color: #0000ff;} /* 蓝色 */2.带透明度的十

2021-09-08 11:17:05 1007

原创 sequelise和egg(node相关)

七、Sequelize(基于promise的node.js ORM)sequelize:https://www.sequelize.com.cn/npm install --save sequelizenpm install --save mysql27.1 node.js和js,ORM一个是基于浏览器端的 javascript (前端 JS)一个是基于服务端的 javascript (后端 Node.js)语法一样组成不一样JavaScript:ECMAScript(语言基础,如:语法

2021-08-23 13:41:23 262

原创 redux,react-redux,react-thunk

三、Redux3.1 reducer规则1.Reducers 必须始终遵循一些特定的规则:他们应该只根据state和action参数计算新的状态值他们不允许修改现有的state. 相反,他们必须通过复制现有值并对复制的值进行更改来进行不可变的更新state。它们不得执行任何异步逻辑、计算随机值或导致其他“副作用”在default情况下返回旧的state。2.reducer判断state是否变化从而更新的方式:不要直接修改原来的state,要创建副本state的原因:在redux-devtoo

2021-08-23 11:53:55 233

原创 react hook学习分享

react hook学习分享二、React HookHook使用了js的闭包机制,useEffect在第一次渲染和每次更新之后都会执行。2.1 State Hook(useState)const [count, setCount] = useState(0);2.2 Effect Hook(useEffect)useEffect相当于componentDidMount,componentDidUpdate,componentWillUnmount合并在一起了的api,副作用函数(1)第二个参数

2021-08-23 11:49:15 194

原创 react学习总结

react学习总结一、React核心概念1.1 表单1.受控组件在HTML中,表单元素通常由自己维护自己的state,并根据用户输入更新。而在react里面,可变状态通常保存在组件的state属性中,并且只能通过setState()来更新。让react成为state的唯一数据源。渲染表单的React组件还控制用户输入过程中表单发生的操作。react以这种方式控制的表单输入元素就叫做受控组件。2 .一般表单元素constructor(props) {super(props);this.stat

2021-08-23 11:44:57 207

原创 postcss插件学习总结

PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的 CSS 规范的样式规则转译(transpile)成当前的 C

2021-08-23 11:38:27 2168

原创 响应式编程(rxjs)学习分享

1.学习网址文档:https://rxjs-cn.github.io/learn-rxjs-operators/operators/combination/concatall.html图示理解:https://rxmarbles.com/2.rxjsrxjs和promise的区别:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B2bZG242-1629689242025)(https://ceph-dev-pub.dz11.com/fed-doc/162755211

2021-08-23 11:35:15 586

原创 函数式编程学习

函数式编程学习1.函数式编程https://zhuanlan.zhihu.com/p/217146951.1 纯函数(没有副作用的函数)副作用的概念:一个带有副作用的函数不仅只是简单的返回一个值,还干了一些其他的事情,比如:修改一个变量直接修改数据结构设置一个对象的成员抛出一个异常或以一个错误终止打印到终端或读取用户的输入读取或写入一个文件在屏幕上绘画 如果你还记得一些初中的数学知识的话,函数 f 的概念就是,对于输入 x 产生一个输出 y =f(x)。这便是一种最简单的纯函数。纯

2021-08-23 11:26:20 176

原创 mac wifi连接无法访问

记一次mac wifi连接无法访问网址的解决方法网络偏好设置=》高级=》TCP/IP=》DHCP续租(点击一下)下面的DHCP客户端不用填,然后就可以了附其他方法网址:https://www.zhihu.com/question/52372614

2021-08-23 11:18:11 204

前端面试数据结构与算法类.docx

前端面试数据结构与算法类.docx

2021-08-31

前端面试计算机网络部分.docx

前端面试计算机网络部分

2021-08-31

前端面试必备2.docx

前端面试必备2.docx

2021-08-31

字节跳动面试题.docx

字节跳动面试

2021-08-31

前端面试必备1.docx

面试必备

2021-08-31

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除