自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(86)
  • 收藏
  • 关注

原创 浅聊权限系统设计模型

浅聊权限系统设计模型

2024-07-04 17:25:16 540

原创 介绍 HTTPS 中间人攻击

https协议是由http+ssl协议构成的。

2024-02-04 17:02:25 1920

原创 jquery table实现分页

jQuery Table实现分页组件

2024-02-04 10:11:32 1019

原创 每日一题:简述ES6 的 class 和构造函数的区别 ?

每日一题:简述ES6 的 class 和构造函数的区别 ?

2024-01-30 16:00:00 385

原创 ES5/ES6 的继承除了写法以外还有什么区别?

ES5/ES6 的继承除了写法以外还有什么区别?

2024-01-30 11:26:13 755

原创 介绍下深度优先遍历和广度优先遍历,如何实现?

介绍下深度优先遍历和广度优先遍历,如何实现?

2024-01-30 10:15:34 232

原创 每日一题:封装 JavaScript源文件的全部内容到一个函数块有什么意义?

【代码】每日一题:封装 JavaScript源文件的全部内容到一个函数块有什么意义?

2024-01-29 15:34:42 200

原创 每日一题:精简对象

现给定一个对象或数组 obj,返回一个 精简对象。精简对象 与原始对象相同,只是将包含 假 值的键移除。该操作适用于对象及其嵌套对象。数组被视为索引作为键的对象。当 Boolean(value) 返回 false 时,值被视为假值。你可以假设 obj 是 JSON.parse 的输出结果。换句话说,它是有效的 JSON。

2024-01-29 15:32:46 246

原创 [‘1‘, ‘2‘, ‘3‘].map(parseInt)的结果

['1', '2', '3'].map(parseInt)的结果

2024-01-23 16:47:16 466

原创 React / Vue 项目时为什么要在列表组件中写 key, 其作用是什么?

React / Vue 项目时为什么要在列表组件中写 key, 其作用是什么?

2024-01-23 16:39:58 412

原创 每日一看:精彩视频等归人

点击查看详情

2024-01-03 16:39:05 626

原创 CSS一个纯样式花里胡哨的动态渐变背景块

CSS一个纯样式花里胡哨的动态渐变背景块

2023-12-31 09:15:00 700

原创 CSS animation动画和关键帧实现轮播图效果HTML

CSS animation动画和关键帧实现轮播图效果HTML

2023-12-30 09:00:00 765

原创 CSS 丝带形状效果

CSS 丝带形状效果

2023-12-29 11:03:39 1311

原创 页面左中右下布局HTML

页面布局布置

2023-12-29 09:00:00 741

原创 JavaScrip实现复选框的全选、全不选和反选

JavaScrip实现复选框的全选、全不选和反选

2023-12-28 09:30:00 435

原创 HTML常见标签和属性

HTML常见标签和属性

2023-12-28 09:00:00 419

原创 CSS-3D动画和NAV-TAB切换HTML

CSS-3D动画和NAV-TAB切换HTML

2023-12-27 09:52:44 714

原创 jQuery实现框里画面的展开、收起和停止

jQuery实现框里画面的展开、收起和停止

2023-12-27 09:00:00 1003

原创 运维工程师的出路到底在哪里?

运维工程师的出路

2023-12-26 17:17:06 1273

原创 CSS、JavaScript实现进度条效果HTML

CSS、JavaScript实现进度条效果HTML

2023-12-26 15:00:00 1250

原创 jquery Tab切换,CSS3制作发光字

jquery Tab切换,CSS3制作发光字代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&

2023-12-26 09:58:47 1237

原创 使用css实现旋转木马HTML

使用css实现旋转木马HTML

2023-12-25 15:12:45 925

原创 css 精灵图动画制作(html)

【代码】css 精灵图动画制作(html)

2023-12-25 14:42:01 826

原创 css画三角形

css 画三角形

2023-12-23 17:00:00 929

原创 利用jquery eq()属性实现Tab标签的切换效果

利用jquery eq()属性实现Tab标签的切换效果

2023-12-22 15:06:23 411

原创 JavaScript计时器

JavaScript实现计时器

2023-12-22 14:46:39 880

原创 JavaScript 数组去重 ES6 方法总结

JS数组去重 ES6 方法

2023-12-22 14:20:16 805

原创 js 现在的时间距离本月月底的倒计时(html)

当前的时间距离本月月底的倒计时

2023-12-22 14:03:10 1520

原创 每日一题,可怜的小猪

给你桶的数目 buckets ,minutesToDie 和 minutesToTest ,返回 在规定时间内判断哪个桶有毒所需的 最小 猪数。小猪喝完水后,必须有 minutesToDie 分钟的冷却时间。在这段时间里,你只能观察,而不允许继续喂猪。过了 minutesToDie 分钟后,所有喝到毒药的猪都会死去,其他所有猪都会活下来。可以允许小猪同时饮用任意数量的桶中的水,并且该过程不需要时间。重复这一过程,直到时间用完。选择若干活猪进行喂养。

2023-12-21 09:55:29 318

原创 你见过哪些令你膛目结舌的代码技巧?

代码世界有很多令人大呼小叫的技巧!有的代码像魔术师一样巧妙地隐藏了自己,有的像魔法师一样让你眼花缭乱,还有的像瑜伽大师一样灵活自如。它们让我们惊叹不已,让我们觉得自己仿佛置身于编码的魔幻世界。快来分享你见过哪些令你膛目结舌的代码技巧吧!

2023-12-21 09:39:08 871

原创 低代码:美味膳食或垃圾食品?

低代码(Low-code)是一种软件开发方法论,它强调使用图形界面和少量的手写代码来快速构建应用程序。低代码开发平台提供了一系列可视化工具和预先构建的组件,使开发人员能够以更快的速度创建应用程序,而无需编写大量的代码。通过低代码开发,开发人员可以使用拖放、配置和自定义来构建应用程序,而无需从头开始编写代码。这种方法使得开发人员能够更快地开发和部署应用程序,并带来了更高的生产效率和灵活性。低代码开发平台也提供了一系列的集成和自动化功能,使得开发人员能够轻松地集成不同的系统和服务,并自动化一些常见的开发任务。

2023-12-21 09:29:56 1055

原创 NPM的介绍和使用

可以使用`npm install`命令来安装特定模块,例如`npm install express`将安装Express模块。安装的模块会被保存到项目的`node_modules`文件夹中,并在`package.json`文件的`dependencies`或`devDependencies`字段中记录。:可以使用`npm update`命令来更新项目的模块。:可以使用`npm uninstall`命令来卸载特定模块,例如`npm uninstall express`将卸载Express模块。

2023-12-21 09:06:47 1194

原创 pip的基本命令和使用

pip是Python的包管理工具

2023-12-21 09:03:42 368

原创 React中如何避免不必要的render?

在 React 类组件中,可以利用 shouldComponentUpdate或者 PureComponent 来减少因父组件更新而触发子组件的 render,从而达到目的。此时需要采取一些措施来提升运行性能,其很重要的一个方向,就是避免不必要的渲染(Render)。React.memo 是 React 16.6 新的一个 API,用来缓存组件的渲染,避免不必要的更新,其实也是一个高阶组件,与 PureComponent 十分类似,但不同的是, React.memo只能用于函数组件。

2023-12-20 15:20:33 614

原创 “前端已死”的言论

"前端已死"这样的言论可能是由于一些人对于前端技术的快速发展和变化感到困惑和无法适应,或者是对于新兴技术的追赶和学习压力感到焦虑。此外,随着后端技术的发展和前后端分离的趋势,一些人可能认为前端工作的重要性不再突出,被后端或全栈工程师所替代。另外,一些人可能对于前端技术的一些缺陷或不足持有负面观点,例如浏览器兼容性问题、性能优化等。然而,需要明确的是,前端作为用户与网站或应用程序的接触点,仍然在不断发展和创新,并且具有重要的作用和价值。

2023-12-20 15:01:10 1114

原创 每日一题,二维平面

给你二维平面上两个由直线构成且边与坐标轴平行/垂直的矩形,请你计算并返回两个矩形覆盖的总面积。

2023-12-19 11:18:55 588

原创 每日一题,旋转图像

【代码】每日一题,旋转图像。

2023-12-14 16:00:00 374

原创 解释 Git 的基本概念和使用方式

远程仓库(Remote Repository):远程仓库是指托管在网络上的仓库,例如GitHub、Bitbucket等。提交(Commit):提交是指将更改保存到版本历史中的操作。Git的基本概念和使用方式可以帮助开发团队更好地管理和协作开发项目,保留每个改动的历史记录,方便追踪问题和回滚更改。合并(Merge):合并是指将一个分支的更改合并到另一个分支中。拉取(Pull):拉取是指从远程仓库中获取最新的代码,并将其合并到本地仓库中。推送(Push):推送是指将本地的提交推送到远程仓库中,以同步代码。

2023-12-14 13:52:11 419

原创 jquery 实现分页组件

分页组件

2023-12-14 11:19:39 928

canvas和纯 CSS 实现波浪进度图

使用 SVG 实现波浪效果(SVG、CANVAS 实现贝塞尔曲线) 使用 canvas 实现波浪效果的原理与 SVG 一样,都是利用路径绘制出三次贝塞尔曲线并赋予动画效果。 主要是利用了动态绘制 ctx.bezierCurveTo() 三次贝塞尔曲线实现波浪的运动效果。 纯 CSS 实现波浪效果(这里背景是蓝色静止的,运动是白色的椭圆形) 后面漂浮的波浪效果,其实就是利用了上面的 border-radius: 45% 的椭圆形,只是放大了很多倍,视野之外的图形都 overflow: hidden ,只留下了一条边的视野,并且增加了一些相应的 transform 变换。 为了方便写 DEMO,用到的长度单位是 VW 与 VH,不太了解这两个单位的可以戳这里:vh、vw、vmin、vmax 知多少 在动画过程中,动态的改变 border-radius 的值; 在动画过程中,利用 transform 对旋转椭圆进行轻微的位移、变形; 上面也演示到了,多个椭圆同时转动,赋予不同时长的动画,并且添加轻微的透明度,让整个效果更佳逼真。 一个圆形的进度和波浪状态的滑动的新DEMO查看预览。

2023-12-21

气泡 Loading 效果

这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。 角向渐变 conic-gradient() + mask 以及两个伪元素。 我们需要多一组元素,将其绝对定位到上述圆环的头部或者尾部 给每个子元素随机设置多个大小不一的圆,颜色保持一致 给每个子元素随机设置不同方向的,向外扩散的位移动画 给每个子元素随机设置负的 animation-delay,造成动画上的先后顺序,并以此形成整个无限循环的气泡扩散动画 核心在于 @for $i from 1 through 100 { } 这段 SASS 代码内部 将两个滤镜拿出来,它们的作用分别是: filter: blur(): 给图像设置高斯模糊效果。 filter: contrast(): 调整图像的对比度。 让每个小球在动画的 75% ~ 100% 阶段做透明度从 1 到 0 的变换,而 0% ~ 75% 的阶段保持透明度为 0 让 200 个 div 依次进行这个动画效果(利用负的 animation-delay,从 -0 到 -4000ms),整体上就能形成逐渐消失的效果

2023-12-21

css样式粒子散开的按钮

CSS实现方式,主要也是两种方式,其实就是想一下有哪些属性可以无限叠加,一个是box-shadow,还有一个是background-image。这里主要通过background-size和background-position来控制原点的尺寸与位置,看着好像挺复杂,其实只要background-size和background-position与background-image位置一一对应就行了。虽然background-image不支持CSS动画,但是另外两个background-size和background-position支持呀,所以,CSS transition和CSS animation都可以用起来。animation和transition实现原理比较类似,优点是可以做出更加精细的动画,这里就拿:active方式来说吧。transition设置在:hover下就可以了,表示只有当鼠标经过时才有过渡,离开时没有。:active需要transition:0s;animation和transition实现原理比较类似,优点是可以做出更加精细的动画。CSS直接扔到项目里就能用。

2023-01-14

css样式粒子动效的按钮

CSS实现方式,主要也是两种方式,其实就是想一下有哪些属性可以无限叠加,一个是box-shadow,还有一个是background-image。这里主要通过background-size和background-position来控制原点的尺寸与位置,看着好像挺复杂,其实只要background-size和background-position与background-image位置一一对应就行了。虽然background-image不支持CSS动画,但是另外两个background-size和background-position支持呀,所以,CSS transition和CSS animation都可以用起来。animation和transition实现原理比较类似,优点是可以做出更加精细的动画,这里就拿:active方式来说吧。transition设置在:hover下就可以了,表示只有当鼠标经过时才有过渡,离开时没有。:active需要transition:0s;animation和transition实现原理比较类似,优点是可以做出更加精细的动画。CSS直接扔到项目里就能用。

2023-01-14

Chrome浏览器中Vue的结构化组件

安装后,在浏览器上可以查看Vue项目的数据结构和对应的数据交互。

2022-12-21

gulp创建项目和精灵图实现

let spriteData = gulp.src(sprite_path + dir + "/*").pipe( spritesmith({ imgName: dir + "-sprite.png", // 合成后的图片命名 cssName: dir + "-sprite.scss", // 合成后的图标样式 padding: 5, // 雪碧图中两图片的间距 algorithm: "binary-tree", imgPath: "./../images/" + dir + "-sprite.png", // // 雪碧图css类名前缀 // cssOpts: { // cssSelector: function (sprite) { // return '.s-' + dir + '-' + sprite.name; // } // } cssTem

2022-12-21

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

TA关注的人

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