css 如何把元素固定在容器底部？（四种方式）
2022-06-07
阅读 2 分钟
10.7k前几天被人问，「如何把元素固定在容器底部」。（本来想直接把 demo 地址给他，结果没找到，那么今天我们来补一下）Demo 地址想法&思路如果是页面底部，我们可以直接 position: fixed;bottom: 0; 基于浏览器定位直接实现。但是他要的效果是基于父级容器，那么我们必须要使用其他手段来定位了relative 来限制 absolute，...
如何做新人引导功能？
2022-05-16
阅读 3 分钟
5.9k节前碰到一个需求：「新人引导效果」针对第一次使用平台的用户进行主要功能引导。具体引导路径为：点击“新增按钮”，对弹出的内容进行解释，并引导用户填充表单，最后提交表单。
Web 页面优化专项 > Lighthouse > 性能分数优化
2022-03-10
阅读 6 分钟
7.8kLighthouse 目前已经集成在新版本 Chrome DevTools 中，也可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。
我想用 JS 实现 0.1 + 0.2 输出 0.3
2021-12-24
阅读 4 分钟
6.3k因为 JS 精度问题 0.1 + 0.2 == 0.30000000000000004 ，可以不可以得出一个正确的值。0.1 + 0.2 == 0.3
基于 elementUI table 组件实现自定义列、宽度、排序并联动同步
2021-07-30
阅读 4 分钟
9.1k哈喽，大家好又是我。昨天有个人在群里问：“基于 elementUI 如何实现拖动修改列宽度，并同步在多个表格中”。这个功能其实听常见的，在不同的使用者眼中关注点就应该是不一样的。比如：项目的主管，更关心进度前端开发，关心设计稿、接口什么时候提供后端开发，关心前端什么时候写完，什么时候联调测试人员，关心什么时候...
2021 年了，你还不会瀑布流布局？（三种靠谱JS方案 + N种不靠谱CSS方案）
2021-07-16
阅读 6 分钟
13.7k我们也想做一个展示我们设计稿（定宽，不定高）的页面，瀑布流是很棒的一种方案。瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。还是上图来看看我们说的瀑布流布局是...
面试题：使用 css 隐藏页面元素
2020-12-03
阅读 2 分钟
2.4k我们先来说一下限制条件可以使用 css、html、js元素为一个 100*100 的红色矩形，里面包含一个 50*50 黑色矩形只要在页面上看不到就算隐藏测试地址：[链接]实现隐藏页面元素移动到屏幕外面，眼不见心不烦marginleft + positiontransform:translate使用特性displayvisibilityopacityoverflow:hidden + 0宽高transform:scal...
面试题：JS 获取图片宽高
2020-12-02
阅读 4 分钟
7.3k一般用于审核后台，比如说要求图片在一定区间内才能加精。也用于在 canvas 中裁图时计算缩放比例。JS 获取图片宽高获取 naturalWidth（callback 版本）方案为获取 naturalWidth。那么 naturalWidth 和 width 有什么不同？naturalWidth 标识图片的原始宽高。width 因为历史问题，标识的其实是 DOM 元素宽高。因为 img 标...
前端培训-中级阶段（52）- Express 的安装、使用 Express 完成 RESTful 操作 MongoDB
2020-10-31
阅读 8 分钟
2.1k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
面试题 - 将伪数组转换为数组的 N 种方案
2020-10-30
阅读 2 分钟
2.6k今天面试了一个人，居然不知道如何将伪数组转换为数组？什么是伪数组？有 length 属性，而且也是数值下标的对象。不具备 Array.prototype 上的方法常见伪数组argumentsdocument.getElementsByClassName$('div')伪数组转换为数组输出伪数组 {代码...} 使用 Array.from （ES6+）（babel-polyfill） {代码...} 使用 ... 展...
前端 BUG 录 - input 数字校验异常问题
2020-10-29
阅读 2 分钟
2.4k小伙伴做的是实名认证（移动端）相关的功能，然后有个位置校验了只能输入数字。小伙伴发出了灵魂质疑：为什么 1. 没事 1.. 就被清空了？ 这个问题告诉我们喝一点没事，“一點點”不行。
前端 BUG 录 - 科学计数法是什么？
2020-10-28
阅读 3 分钟
7.2k把一个数表示成a与10的n次幂相乘的形式（1≤|a|<10，a不为分数形式，n为整数）。19971400000000 == 1.99714×10^13 == 1.99714e13
如何通过 response 的头信息获取文件类型？
2020-10-27
阅读 5 分钟
5.4k今天在前端工匠的群里，看到了一个问题（下载文件，但是请求头中需要传递 token，如何下载文件？怎么设置文件类型？），我们来解决一下这个问题。
如何实现 textarea 的 autoHeight 功能
2020-10-26
阅读 4 分钟
4.5k可以看到在我们使用 textarea 的时候，有时候需要感知内容的高度，然后动态撑开。（elementUI 的 textarea 就提供了 autosize 的功能。）
前端培训-中级阶段（50）- MongoDB 简介、安装数据库、集合、文档概念
2020-10-24
阅读 3 分钟
2.7k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
不应该被滥用的 input 属性
2020-10-21
阅读 2 分钟
3.8k前两天接到了一个需求：手机号、身份证、验证码 需要校验，检验规则包括长度、内容。想法是有一堆，但是不知道好使不好使，我们今天来整理一下咯。先来说说都有什么想法html 的标签属性typepatternmin、maxminlength、maxlengthjs 的事件监听value 获取值（vue 使用 v-model）@input 监听改变接下来就是我们大家都很期待...
前端 BUG 录 - 因数组排序造成的卡顿
2020-10-20
阅读 2 分钟
3k前端 BUG 录 - 因 lodashjs debounce 去抖优化造成的 bug这两个 BUG 其实是同一个 BUG，怎么说呢？两个都没错，错就错在同时使用了。因为我没处理边界，导致我会给一个大数组排序，造成了卡顿。然后卡顿造成了节流时间成为了笑话。提问因为这个 BUG 其实有好几个限定条件才会触发，所以我先来提几个问题5000 条乱序的数...
前端 BUG 录 - 使用 VUE 做飘屏功能因为 :key 设置错误造成异常动画
2020-10-19
阅读 2 分钟
3.7k正好这段时间内部在抽离常用组件，运营小姐姐最近迷上了飘屏功能，各种活动都要有个飘屏才罢休。然后就安排人抽离成组件了。结果这个组件在同一个位置绊倒了两个人，那么今天我们来分析一下。
前端 BUG 录 - 因 lodashjs debounce 去抖优化造成的 bug
2020-10-16
阅读 1 分钟
3.2k做开发其实还是要考虑一下边界问题，因为边界问题有时候会导致体验断崖式的下跌。正好前段时间遇到了个问题，今天分享一下。之前做了一个 IM 的项目，是会话列表出现的问题：进入页面时，会加载会话列表，加载数据会造成卡顿。先说说我的逻辑：分页拉取本地历史数据（已读消息，userid排序的20个人）定时拉取远程数据（...
前端 BUG 录 - audio 意外的 pending 挂起状态
2020-10-13
阅读 2 分钟
3.1k最近公司一直在做众审平台相关的功能，大多数还都和音视频有关，前端终究还是逃不过这一劫。疯狂遇到 BUG， 今天来说说其中一个：audio 加载时意外的长时间 Pending 问题。BUG 场景vue 框架移动端（android 和 ios 的兼容也挺坑，尤其是低版本）偶现（测试数据很难复现）资源是 cdn，存在海外节点。（意味着不是海外用户...
你不知道的 input 之文件选择（accept、capture、multiple、webkitdirectory）
2020-10-12
阅读 3 分钟
8.5k前段时间写了一个上传文件前预览的功能，用于 pc 端。这次又要测试一下移动端的兼容性，在客户端内使用。正好整理一下，先上测试地址：DEMO 地址，目前有这些功能。动态设置 accept、capture、multiple、webkitdirectory?accept=.png 的形式快速还原场景上传前预览的功能，前端上传前预览文件 image、text、json、video...
因为疫情《云毕业照》火了，如何快速的搞一下呢？
2020-10-11
阅读 1 分钟
2.3k因为疫情，所有学校都放假了（从寒假到暑假，我也想要啊）云合影、云毕业照、人脸融合成了热点名词，咱们也来凑凑热闹（demo 代码大概六月份就写了，一直没整理内容，现在成了吃冷饭了）
禁止浏览器 title 属性的默认效果
2020-10-10
阅读 2 分钟
6.8k正好回答了一个问题，浏览器哪个事件里可以 禁止 浏览器对title显示默认行为？ 。今天整理一下相关的测试 demo。分析问题先找一下关键词，从里面找一下解决问题的思路。ssrtitle默认行为seo自定义 tooltip 行为解决问题阻止浏览器默认行为（失败了）event.preventDefault() 可以用来阻止浏览器的默认行为，比如说 onsubm...
JS效果之《获取鼠标所在区域的容器，区域外都遮罩半透明》
2020-10-09
阅读 4 分钟
4.9k获取鼠标位置，鼠标属于的容器。mouseover，mouseout，mousedown，mouseup，mouseenter，mouseleave，mousemove 这么多事件太容易了。但是因为 DOM 结构太多了，其实要的元素有可能是父级、祖先级，这里需要实现一个类似于 jquery 的 parants。
前端培训-中级阶段（45）- node 10.x 环境搭建、NPM 包管理器
2020-10-07
阅读 5 分钟
2.4k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（44）- node 10.x 介绍及使用
2020-10-06
阅读 2 分钟
1.8k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（43）- vue 2.x 实战 CURD
2020-10-05
阅读 5 分钟
2k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（42）- axios 使用及如何和 vue 结合使用
2020-10-04
阅读 6 分钟
3.7k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前端培训-中级阶段（41）- vue 2.x 状态管理 vuex
2020-10-03
阅读 3 分钟
2.4k前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
- 1(current)
- 下一页