前端实现速度线
功能
前端实现速度线，在矩形内生成黑白三角形且闪动。
思路
速度线可以使用多个角度相同的三角形分解矩形。三角形的渲染使用canvas连线fill就行，三角形在矩形上的两个点可以通过计算每个三角形的边长来获取。三角形在矩形上的边长使用三角函数获取。
HTML结构：包含一个画布（Canvas）用于显示图片。
CSS样式：定义了页 ...
上传图片修改透明边距并下载下来
功能
允许用户上传图片，并在图片周围添加透明边距。用户可以调整边距的大小，然后将修改后的图片下载为PNG格式。
思路
HTML结构：包含一个画布（Canvas）用于显示图片，以及一些输入框和按钮用于调整边距和下载图片。
CSS样式：定义了页面的基本布局和样式，使页面居中显示，并设置了画布的大小和边框。
JavaScript功能： ...
老板：能不能别手动复制路由了？我：写个脚本自动扫描
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
起因
周五快下班，老板过来看权限配置页面。
"这个每次都要手动输路径？"
"对，现在是这样。"我打开给他看：
角色：运营专员
路由路径：[手动输入] /user/list
组件路径：[手动输入] @/views/user/List.vue
"上次运营配错了，/user/list 写成 /user/lists，页面打不开找了 ...
THREE.js 摄像机分享
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前置代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
height: 100%;
}
#c ...
面试官：如何解决按钮重复点击？这个问题挂了80%的人！
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前言
还记得上周我们团队在招聘前端工程师，一个看起来经验丰富的候选人坐在我对面。
"你们项目中是如何处理按钮重复点击的问题的？"我抛出了这个看似简单的问题。
"这个简单，使用防抖就可以了。"他很快回答。
然而，当我继续追问细节时，他却陷入了沉思...
实际上，这个问 ...
利用自定义html元素实现支持实时修改的高亮代码块
利用自定义html元素实现支持实时修改的高亮代码块
代码块高亮是前端开发中常见的需求，尤其是在展示代码片段的博客、文档等场景中。市面上有很多成熟的代码高亮库，比如Highlight.js、Prism.js等，它们都能很好地实现代码高亮功能。
通常的高亮代码块是“静态”的，修改代码内容后需要对DOM元素重新应用高亮样式。由于涉及D ...
这 5 个冷门的 HTML 标签，能让你少写 100 行 JS
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
大家好!😁。
Code Review 的时候，我最怕看到什么？
不是复杂的算法，也不是什么正则。而是明明一个 HTML 标签就能搞定的事，有人非要写几百行 JS + CSS 去重新发明轮子 。
前几天，我看到一个新同学为了写一个折叠面板（Accordion），引入了一个重型的第三方库，还写了一堆 ...
CSS 有什么奇技淫巧？
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
aspect-ratio
宽高比
<style>
div {
width: 190px; /* 注意，这个数字要能容纳完内容才有效 */
aspect-ratio: 16 / 9;
background: tomato;
}
</style>
<div>我永远保持 16:9</div>
如果，你 aspect-ratio 的值写成 1 ，那么就可以得 ...
wangeditor5自定义扩展设置图片宽高（px）
wangeditor设置图片宽高默认有30%、50%、100%三种等比缩放选择，但是有的时候需要按照像素控制图片大小不在乎图片是否有拉伸的情况。所以只能编写设置图片宽高的自定义扩展。
编辑
1、设置图片大小最好就是与原生一样放置到选中工具栏上最合适，且因为要设置宽高两种属性所以用弹窗嵌套表格方便填写。
2、查看官方文档 ...
Vue 中的 deep、v-deep 和 >>> 有什么区别？什么时候该用？
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
“你用 Element Plus 写了个按钮，想改下 hover 颜色，结果死活不生效！最后查了半天，发现得加个 :deep() 才行”
其实，这是 Vue 中一个非常常见的坑：样式作用域冲突。那为什么用 UI 库时，加上 :deep()、::v-deep 或 >>>后，样式就能生效呢？
它们是什么？有什么区别？什 ...
vue 甘特图 vxe-gantt 自定义任务条插槽模板的用法
vue 甘特图 vxe-gantt 自定义任务条插槽模板的用法
https://gantt.vxeui.com
过设置 taskBar 插槽来自定义模板
<template>
<div>
<vxe-gantt v-bind="ganttOptions">
<template #task-bar-overview="{ row }">
<div class="custom-task-bar" :style="{ backgroundColor: row.bgColor }">
<d ...
拆解一个由 setTimeout 引发的“页面假死”悬案
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
引言
灵魂拷问
你是不是也写过这样的代码？
“这个动画有点卡，加个 setTimeout 延时一下？” “这个状态更新顺序不对，给它个 100ms 缓冲？” “不知道什么时候滚动结束？先延迟个 300ms 再说！”
在前端开发中，setTimeout 就像是一剂强效止痛药。它能快速掩盖逻辑上的时序 ...
为什么有些人边框不用border属性
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
1) border 会改变布局（占据空间）
border 会参与盒模型，增加元素尺寸。
例如，一个宽度 200px 的元素加上 border: 1px solid #000，实际宽度会变成：
200 + 1px(left) + 1px(right) = 202px
如果不想影响布局，就很麻烦。
使用 box-shadow: 0 0 0 1px #000不会 ...
🔥 手把手教你实现前端邮件预览功能
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
你是否曾经想过，在浏览器中直接点击一个邮件附件，就能预览完整的邮件内容——包括发件人、收件人、抄送、正文甚至内嵌图片？今天，我们要揭秘一个基于 Vue 3 和 Vant UI 的邮件预览上传组件，它不仅能上传 .eml 格式的邮件文件，还能在弹窗中完整渲染邮件内容， ...
一些有用的javascript函数
作者：不爱喝橙子汁
/**
* 类型检测函数
* 为typeof关键字的增强版，可以准确判断null，date类型
* 原理是使用V8引擎最初的toString方法观察数据类型
* @author 不爱喝橙子汁
* @version 1.0.0
* @param {Object} obj 任意对象，例如null，undefined，date
* @return {String} 类型的全小写字符串
*/
function ty ...
关于antd前端组件a-select组件选择无效的问题处理记录
在使用公司的信息系统时，偶然发现一个下拉组件选择无效，于是看一下前端页面的代码。
前端页面是基于ant Design vue组件开发，JS代码如下，主要用于获取当前登录用户所属的组织机构列表和默认的组织机构
//获取用户信息
const userInfo = tool.data.get('USER_INFO')
//获取用户归属的组织机构列表（有多个）
const orgs ...
vue2 甘特图 vxe-gantt 一行渲染多个子任务的配置
vue2 甘特图 vxe-gantt 一行渲染多个子任务的配置，但需要在父级任务直接显示所有子任务时，可以通过 task-bar-subview-config 和父级任务设置type= VxeGanttTaskType.Subview 来设置，会自动将所有子任务渲染到父级任务中
https://gantt.vxeui.com
设置 task-bar-subview-config.showOverview 设置是否任务总览，当子任 ...
那个写 width: 33.33% 的前端，终于被 flex: 1 拯救了
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
告别百分比计算：从文档流到 Flex 弹性布局的进化之路
在 CSS 的世界里，布局方式的演进就像是一场对“控制权”的争夺战。从最初顺其自然的文档流，到精打细算的 inline-block，再到如今游刃有余的 Flexbox，我们的代码变得越来越优雅。
一、 随波逐流：HTML 文档流
...
大屏适配方案
前言：不同分辨率的大屏适配这个是每个前端都会遇见的问题，以前也尝试过多种方案，今天就来分享一下我尝试过的方案跟我比较推荐的方案。
一、常见的大屏适配方案
1. 固定宽高 + scale 整体缩放
核心思想：把设计稿当作“画布”，用 CSS transform: scale() 对整张画布缩放，保证视觉一致性。
原理：根据屏幕尺寸与设计稿尺 ...
vue甘特图 vxe-gantt 如何将子任务显示一行在父级中，父级行内渲染显示子任务的用法
vue甘特图 vxe-gantt 如何将子任务显示一行在父级中，父级行内渲染显示子任务的用法，行内展示子任务由 task-bar-subview-config 和父级任务设置type= VxeGanttTaskType.Subview 来启用。启用后会将所有子任务渲染到父级任务中，可以直观的看到任务全程进度, task-bar-subview-config.showOverview 设置是否任务总览，当子 ...
