前端开发
刷新
用户单击文本并复制至剪帖板

博主头像 Html5网页，一些内容，可以让用户点击选中文本，并把选中的文本复制至剪帖板(Clipboard)。Insus.NET已经实现与测试，记录于此，方便时可以重来查阅与参考。复制文本到剪贴板（兼容所有浏览器） function CopyTextToClipboard(text) { // 方法1: 使用 ...

uniapp多边形动画

博主头像 实现效果 使用三角形，四边形等拼成一个爱心的图形。 爱心的图形一段时间会有高光闪过。 点击爱心图形会使拼成一个心字。 实现思路 三角形，四边形可以用clip-path: polygon();画出来，确定几个顶点可以画出任意图形。 高光需要在每个多边形添加动画延迟然后加上统一的动画。 爱心变成心字只需 ...

前端实现速度线

博主头像 功能 前端实现速度线，在矩形内生成黑白三角形且闪动。 思路 速度线可以使用多个角度相同的三角形分解矩形。三角形的渲染使用canvas连线fill就行，三角形在矩形上的两个点可以通过计算每个三角形的边长来获取。三角形在矩形上的边长使用三角函数获取。 HTML结构：包含一个画布（Canvas）用于显示图 ...

上传图片修改透明边距并下载下来

博主头像 功能 允许用户上传图片，并在图片周围添加透明边距。用户可以调整边距的大小，然后将修改后的图片下载为PNG格式。 思路 HTML结构：包含一个画布（Canvas）用于显示图片，以及一些输入框和按钮用于调整边距和下载图片。 CSS样式：定义了页面的基本布局和样式，使页面居中显示，并设置了画布的大小和边框 ...

THREE.js 摄像机分享

博主头像 ‍ 写在开头 点赞 + 收藏 学会 前置代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini ...

面试官：如何解决按钮重复点击？这个问题挂了80%的人！

博主头像 ‍ 写在开头 点赞 + 收藏 学会 前言 还记得上周我们团队在招聘前端工程师，一个看起来经验丰富的候选人坐在我对面。 "你们项目中是如何处理按钮重复点击的问题的？"我抛出了这个看似简单的问题。 "这个简单，使用防抖就可以了。"他很快回答。 然而，当我继续追问细节时，他却陷入了沉思 ...

利用自定义html元素实现支持实时修改的高亮代码块

博主头像 利用自定义html元素实现支持实时修改的高亮代码块 代码块高亮是前端开发中常见的需求，尤其是在展示代码片段的博客、文档等场景中。市面上有很多成熟的代码高亮库，比如Highlight.js、Prism.js等，它们都能很好地实现代码高亮功能。 通常的高亮代码块是“静态”的，修改代码内容后需要对DOM元 ...

这 5 个冷门的 HTML 标签，能让你少写 100 行 JS

博主头像 ‍ 写在开头 点赞 + 收藏 学会 大家好!。 Code Review 的时候，我最怕看到什么？ 不是复杂的算法，也不是什么正则。而是明明一个 HTML 标签就能搞定的事，有人非要写几百行 JS + CSS 去重新发明轮子 。 前几天，我看到一个新同学为了写一个折叠面板（Ac ...

CSS 有什么奇技淫巧？

博主头像 ‍ 写在开头 点赞 + 收藏 学会 aspect-ratio 宽高比 <style> div { width: 190px; /* 注意，这个数字要能容纳完内容才有效 */ aspect-ratio: 16 / 9; background: tomato; } </style> ...

wangeditor5自定义扩展设置图片宽高（px）

博主头像 ​ wangeditor设置图片宽高默认有30%、50%、100%三种等比缩放选择，但是有的时候需要按照像素控制图片大小不在乎图片是否有拉伸的情况。所以只能编写设置图片宽高的自定义扩展。 ​编辑 1、设置图片大小最好就是与原生一样放置到选中工具栏上最合适，且因为要设置宽高两种属性所以用弹窗嵌套表格方 ...

拆解一个由 setTimeout 引发的“页面假死”悬案

博主头像 ‍ 写在开头 点赞 + 收藏 学会 引言 灵魂拷问 你是不是也写过这样的代码？ “这个动画有点卡，加个 setTimeout 延时一下？” “这个状态更新顺序不对，给它个 100ms 缓冲？” “不知道什么时候滚动结束？先延迟个 300ms 再说！” 在前端开发中，setTime ...

为什么有些人边框不用border属性

博主头像 ‍ 写在开头 点赞 + 收藏 学会 1) border 会改变布局（占据空间） border 会参与盒模型，增加元素尺寸。 例如，一个宽度 200px 的元素加上 border: 1px solid #000，实际宽度会变成： 200 + 1px(left) + 1px(righ ...

手把手教你实现前端邮件预览功能

博主头像 ‍ 写在开头 点赞 + 收藏 学会 你是否曾经想过，在浏览器中直接点击一个邮件附件，就能预览完整的邮件内容——包括发件人、收件人、抄送、正文甚至内嵌图片？今天，我们要揭秘一个基于 Vue 3 和 Vant UI 的邮件预览上传组件，它不仅能上传 .eml 格式的邮件文件，还能在弹 ...

一些有用的javascript函数

博主头像 作者：不爱喝橙子汁 /** * 类型检测函数 * 为typeof关键字的增强版，可以准确判断null，date类型 * 原理是使用V8引擎最初的toString方法观察数据类型 * @author 不爱喝橙子汁 * @version 1.0.0 * @param {Object} obj 任意对象， ...

关于antd前端组件a-select组件选择无效的问题处理记录

在使用公司的信息系统时，偶然发现一个下拉组件选择无效，于是看一下前端页面的代码。 前端页面是基于ant Design vue组件开发，JS代码如下，主要用于获取当前登录用户所属的组织机构列表和默认的组织机构 //获取用户信息 const userInfo = tool.data.get('USER_ ...

<1234···50>