前端小技巧
文章平均质量分 52
记录自己使用过的前端小技巧。
mpr0xy
这个作者很懒,什么都没留下…
展开
-
网页里彩色渐变的字体如何实现
最后可以使用animation, 改变渐变色,这样就能实现渐变色的文字了。让背景显示在字体里面,字体颜色透明。将背景设置为渐变色。原创 2024-07-30 10:06:49 · 267 阅读 · 0 评论 -
如何捕获和分析 JavaScript Error
如何捕获和分析 JavaScript Error前端工程师都知道 JavaScript 有基本的异常处理能力。我们可以throw new Error(),浏览器也会在我们调用 API 出错时抛出异常。但估计绝大多数前端工程师都没考虑过收集这些异常信息。反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了。这种假设在转载 2014-05-16 13:20:04 · 974 阅读 · 0 评论 -
禁止用户选择内容
通常的做法是写一个css实现。现代浏览器都支持。-moz-user-select:none;-webkit-user-select:none;user-select:none;但是在某个网站看到了这个实现方式,挺有意思的:var image_save_msg='You are not allowed to save images!'; var no_menu_msg='Context Menu disabled!'; var smessage = "Content is prote转载 2021-05-12 00:40:21 · 217 阅读 · 0 评论 -
3种方式禁用浏览器滚动条
在一些场景中,比如弹出一个带滚动条的浮窗,为了避免在操作时触发原生滚动条,这时我们需要禁用掉浏览器的滚动条。常用的三种方法如下。方法一让body不能滚动。export const forbidBodyScoll = () => { const body = window.document.getElementsByTagName('body')[0]; body.style.overflow = 'hidden';};export const allowBodyScol原创 2021-04-26 21:49:53 · 7315 阅读 · 0 评论 -
Dart学习记录(1)
在看Flutter文档里,有一个内容是Flutter For React Native devs。里面讲了RN和Flutter的区别,并且同一个功能,会使用JS和Dart都实现一遍来对比讲解。看着看着就点到了Dart都文档里,Dart基本和Flutter共同在发展,在阅读Dart overview时,发现了两个有趣的东西:1、计算圆周率代码如下:import 'dart:math' show Random;void main() async { print('Compute π u原创 2021-03-26 15:31:59 · 222 阅读 · 0 评论 -
前端换肤的一些思考
先看看大家怎么做的。下面是两篇别人写的文章,最后是我自己的方法。第一篇:聊一聊前端换肤之前在做网站换肤,所以想谈谈网站换肤的实现。网页换肤就是修改颜色值,因此重点就在于怎么来替换。一般实现如上图,我们会看到在某些网站的右上角会出现这么几个颜色块,点击不同的颜色块,网站的整体颜色就被替换了。要实现它,我们考虑最简单的方式:点击不同的按钮切换不同的样式表 ,如:...原创 2020-03-31 00:08:02 · 1949 阅读 · 2 评论 -
从iOS 8报错Promise——Babel配置
问题有用户打开页面白屏,找到用户手机系统是iOS 8。在找到iOS 8进行测试后,发现是Promise报错。思考代码都通过Babel转义了,为何还会报错?查看Babel官网说明,如下图:说明如果需要支持Promise,需要使用polyfill。在polyfill的说明里写到,最简单的方法就是在代码入口文件直接加入:import "@babel/polyfill";...原创 2019-11-16 14:56:01 · 657 阅读 · 0 评论 -
前端白屏问题分析——CDN资源失效、JS代码不兼容、css代码不兼容
1、CDN资源失效导致白屏用户网络环境复杂,运营商劫持,国外访问CDN无效等等。这种情况下会导致白屏。应得这种情况,识别资源加载识别,切换线路重新加载资源自然成了我们选择的方案。大家已经有了一些方案:简单策略让前端资源实现高可用域名劫持资源重加载方案前端资源加载重试configuring webpack public path at runtime这些方案有通...原创 2019-09-03 22:52:59 · 3768 阅读 · 0 评论 -
Performance — 前端性能监控利器
转载自:https://www.cnblogs.com/bldxh/p/6857324.html最近在写一个监控脚本,终于有机会接触到了这一块,整理后写下了本文。Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。属性timing (Performance...转载 2018-03-15 09:58:53 · 506 阅读 · 0 评论 -
HTML5本地存储里储存对象
HTML5本地存储里储存对象W3schools在HTML5里,网页可以把数据存储到用户得本地浏览器里。以前,这些数据保存在cookies里。但是Web存储更安全和快速。这些数据不必包含在每次服务器请求中,仅需要时使用。它可以用来存储比较大得数据,而不会影响网站得性能。数据存储依靠name/value得形式,一个网页只能访问它自己存储得数据。不像cookies那样翻译 2014-05-12 00:03:00 · 16181 阅读 · 0 评论