前端技术文章
-
- 如何设置折叠面板标题的SUMMARY标签与可见交互文案
- summary标签本质是details的唯一交互锚点,必须为首个直接子元素;支持纯文本、内联元素(如<svg>)及emoji,但禁用块级元素;失效主因包括结构错位、CSS阻断(如pointer-events:none)或JS覆盖默认行为。
- 文章 · 前端 | 3星期前 | 435浏览 收藏
-
元素JavaScript控制:通过DOM操作获取元素并调用showPicker()方法示例代码
元素JavaScript控制:通过DOM操作获取元素并调用showPicker()方法示例代码
-
元素JavaScript控制:通过DOM操作获取元素并调用showPicker()方法示例代码
JavaScript主动调用input的showPicker方法弹出日期选择器,实现方式如下:HTML结构:创建一个元素JavaScript控制:通过DOM操作获取元素并调用showPicker()方法示例代码 - showPicker()仅在Chromium98+(Chrome、Edge、Opera)及AndroidWebView120+中稳定支持,Firefox、Safari和iOSWKWebView完全不支持;需运行时检测并满足DOM可交互、用户手势触发等条件。
- 文章 · 前端 | 3星期前 | 207浏览 收藏
-
元素JavaScript控制:通过DOM操作获取元素并调用showPicker()方法示例代码
-
- HTML透明背景色设置技巧
- 最稳妥的做法是用rgba()或hsla()设置background-color实现背景半透明,避免使用opacity(会导致整个元素及子元素变透明);现代浏览器均支持,可结合CSS自定义属性动态控制。
- 文章 · 前端 | 3星期前 | 413浏览 收藏
-
- JavaScript异步编程详解及Promise用法
- Promise是ES6引入的异步编程标准对象,用于解决回调地狱、错误处理分散及缺乏统一控制等问题;它表示异步操作的三种状态(pending/fulfilled/rejected),通过newPromise()创建,支持.then()/.catch()链式调用与Promise.all/race/finally等组合方法。
- 文章 · 前端 | 3星期前 | 187浏览 收藏
-
- CSS制作响应式面包屑导航,隐藏溢出方法
- overflow:hidden截断面包屑文字是因为white-space:normal允许换行但容器高度固定,导致溢出裁剪;需配合white-space:nowrap、明确高度及text-overflow:ellipsis(需同时满足overflow:hidden、nowrap和确定宽度)才能正确生效。
- 文章 · 前端 | 3星期前 | 214浏览 收藏
-
- export 实现异步任务队列单例管理方法
- ES6模块天然单例特性实现异步任务队列模块级单例:顶层创建唯一实例并导出接口,确保所有导入者共享同一队列状态,避免重复初始化与并发冲突,兼顾封装性、一致性与可扩展性。
- 文章 · 前端 | 3星期前 | 275浏览 收藏
-
- PyCharm运行HTML文件夹方法详解
- 使用PyCharm运行多HTML文件夹可通过四种方法:一、右键单个HTML文件选择OpeninBrowser预览;二、在终端执行python-mhttp.server8000启动本地服务器,浏览器访问http://localhost:8000查看整个文件夹;三、安装LiveServer插件,右键HTML文件启动服务并实现保存自动刷新;四、配置ExternalTools添加自定义命令如Python或Node.js服务器脚本,工作目录设为$ProjectFileDir$,通过Tools菜单一键启动。
- 文章 · 前端 | 3星期前 | html PyCharm 143浏览 收藏
-
- Less中自动选择文字颜色技巧
- contrast()仅在Less编译期根据背景色luma静态计算文字色,不支持运行时动态变色;其@threshold是luma分界点(非亮度阈值),合理范围为30%–45%,且需配合lighten()/darken()微调以提升可读性与舒适度。
- 文章 · 前端 | 3星期前 | 375浏览 收藏
-
- 表单实时校验结构与反馈设计详解
- input事件是最适合作为实时校验触发点的方案,它在每次输入(含粘贴、删除、中文上屏)时触发,兼顾实时性与体验,且需避开keyup陷阱、合理使用CSS类名控制反馈、区分异步校验状态、保留focus/blur以支持无障碍。
- 文章 · 前端 | 3星期前 | 168浏览 收藏
-
- HTML中如何用Page Visibility API节省资源
- visibilitychange事件需主动监听并兼容旧浏览器,页面隐藏时应手动清理setInterval、requestAnimationFrame等,恢复时需防重复启动。
- 文章 · 前端 | 3星期前 | 363浏览 收藏
-
- HTML元素两端对齐方法详解
- 用justify-content:space-between实现两端对齐最常用可靠,需父容器display:flex且子元素不设flex:1或100%宽;text-align-last:justify配合text-align:justify可实现单行文字两端对齐;避免用float或absolute模拟,grid中使用需注意轨道定义。
- 文章 · 前端 | 3星期前 | 129浏览 收藏
