樊小书生

写本篇文章的时候是看了 移动端1px问题解决方案 ，这里面介绍了多种解决方案，我本篇文章只着重介绍 伪元素先放大后缩小 的方法。可以先点击查看效果链接，建议在Retina屏幕移动端查看：移动端1px，可直接使用手机扫码下方二维码。效果如下：这里只简单介绍两种常用的，其他的举一反三就可以。按钮边框Retina屏幕移动端查看上面的例子，可以发现按钮直接设置 border: 1px solid #aaa; 比使用伪元素宽。下面展示代码：border: 1px solid #aaa;：<bu

Sentry账号及SDK语言选择注册账号：https://sentry.io/for/vue/选择平台：Sentry通过官方的Sentry SDK与许多不同的语言和平台集成。本项目选择 Vue 。安装Sentry SDK安装Sentry的浏览器JavaScript SDK：@sentry/browser : yarn add @sentry/browser 或者 npm install @sentry/browser ，之后@sentry/browser 将报告通过应用程序捕获触发的任何异常

全景看图Pannellum专栏主要是对Pannellum做翻译，方便查看。Pannellum是一款轻量级，免费且开源的全景浏览器，适用于网络。它使用HTML5，CSS3，JavaScript和WebGL构建，不受插件限制。官网（例子）：https://pannellum.org/特点Equirectangular，partial，cubic和multi-resolution全景图...

placeholder属性的出现使input输入框不再单调，而且可以对用户做一个对输入内容的提醒或者指引，起到了很好的作用。但是 但是IE9及IE9以下不支持这个属性，这就让人很恼火呀，毕竟中国还有好多人用的是IE9及以下浏览器/(ㄒoㄒ)/~~。

vCard 规范容许公开交换个人数据交换 (Personal Data Interchange PDI) 信息，在传统纸质商业名片可找到这些信息。规范定义电子名片(或叫vCard)的格式。 vCard 规范可作为各种应用或系统之间的交换格式。定义的格式与传送的方法无关。传送交换可能是文件系统，点对点交换的公共电话网络，以有线网络或无线传送的方式。用户能在互联网上直接利用vCard。电子邮件能转发在vCard中人信息。

在使用谷歌浏览器进行前端开发的时候，console作为控制台的一个主要方法，相信大家都用过，一般都是用console.log()来输出部分内容，但是console还有很多强大之处，下面主要说一下console的更重强大的地方： 首先在chrome控制台的console中输入console.就会出现如下： 后面出现的都是console的方法，下面来主要说明一下这些方法：1、console...

部署 Sentry 要求Docker 17.05.0+Compose 1.23.0+至少需要2400MB RAMDocker 及 Sentry 依赖安装如果 Docker 版本太低，需要卸载旧版本。卸载Docker旧版本较旧的Docker版本称为docker或docker-engine。如果已安装这些程序，请卸载它们以及相关的依赖项。sudo yum remove docker docker-client docker-client-latest docker-common docker

在Vue项目中，为了提升性能缩短首页的白屏时间（更具体的白屏时间可查看Web 性能优化-首屏和白屏时间），我们可以通过将公共库采用CDN引入的方式以及将资源文件压缩的方式。关于 配置CDN及Gzip 之后可从以下3个链接进行体验，在 Chrome 开发者工具 Network 中勾选 Disable Cache：未配置CDN及Gzip：https://www.fxss.work/authorityRouter配置CDN但未配置Gzip：https://www.fxss.work/authorityRo

关于 nginx 的 gzip ，可以分为两种：nginx 动态压缩，对每个请求先压缩再输出。nginx 静态压缩，使用现成的扩展名为 .gz 的预压缩文件。nginx 动态压缩开启 nginx 动态压缩只需要在 nginx.conf 文件中做如下修改即可：# 开启和关闭gzip模式gzip on;# gizp压缩起点，文件大于1k才进行压缩gzip_min_length 1k;# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 gzip_buffer

对于 nuxt 项目，一般采用官方提供的 create-nuxt-app 脚手架，具体过程 https://zh.nuxtjs.org/guide/installation/ 。在实际开发中一般使用 npm run dev 其本地服务进行开发发布部署的时候首先需要 npm run build （相当于 nuxt build ） 利用webpack编译应用，压缩JS和CSS资源之后将文件上传...

之前写过一篇关于代码块渲染添加自定义行号的文章：markdown-it和highlight.js的结合渲染代码，并添加自定义行号 。不过在之后的渲染使用过程中由于效果不是很好，所以重新改版，并借此机会添加复制代码功能。本博客采用的后端是 node.js 框架 Express，在使用 markdown-it 渲染 md 文件的时候，选择在添加文章或者更新文章的时候由 md 生成 html。代码...

每个方法都有相应的描述、语法、参数、返回值、注意项（可选）、例子（可选）。语法中的[]里面中的内容表示参数为可选参数。原文出自：https://fxss5201.github.io/practical-code-snippet/js/javascript/Array.htmlArray.prototype.lastIndexOf()描述：返回从数组中逆向找到给定元素的第一个索引，如果不存在...

每个方法都有相应的描述、语法、参数、返回值、注意项（可选）、例子（可选）。语法中的[]里面中的内容表示参数为可选参数。Array.from()描述：从一个类似数组或可迭代对象中创建一个新的数组实例。语法：new_array = Array.from(arrayLike[, callback(element[, index[, array]])[, thisArg]]);参数：ar...

数据双向绑定主要会用Object.defineProperty()，关于它的用法可查看：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty。可以直接点击查看例子。代码实现如下：&lt;!DOCTYPE html&gt;&lt;html l...

一般在项目中，用户登录之后有消息通知的时候，用户头像上面会有一个消息数来提醒用户，但这个数字要保证新打开一个页面的时候是正确的，当切换浏览器的tab再回来的时候还要保证正确性。说到这可能有人觉得放一个定时器，过一段时间去获取一次不就可以了，但这样会相当耗性能，使用定时器，这个页面就算被隐藏（非当前标签页、最小化）也会去一直执行这个定时器，这就相当消耗资源，而且这个页面放很久的话，还会造成页面卡死...

可以通过toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为thisArg。var toString = Object.prototype.toStr...

最初接触css选择器优先级这一块的内容的时候，是以下面这张图为准： ，按照上图进行计算，但是我昨天看了一篇文章发现这样算是错误的。文章地址：https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ 。他里面讲的css选择器是按照如下的这种方式计算优先级的：看到上面图我就突...

下面为公共代码：&lt;div class="box"&gt; &lt;div class="small"&gt;small&lt;/div&gt;&lt;/div&gt;.box { width: 300px; height: 300px; background: #ddd;}.small { background: red;}水平垂直居...

HTML中直接使用video来播放视频，在Chrome浏览器、360浏览器、QQ浏览器（以及其他一些使用Chrome内核Blink）等中都会出现下载按钮，但我们一般又不希望出现下载按钮。好像是从Chrome 54版本开发有下载按钮的（从网上看到的，我也不确定），网上有css解决方案，如下：video::-internal-media-controls-download-button { ...

首先先解释一下题目，什么叫做新数组n位值是老数组前n位的和，下面举两个例子就明了了， 老数组：var old = [1,2,3,4] 新数组：var new = [1,3,6,10]

介绍steps.js是基于原生JavaScript的组件，可用于展示步骤条、时间轴等，功能支持：自适应支持横向和纵向显示，并且横向还支持居中显示支持自定义间距主轴线上下左右单方向及多方向分布支持数字和圆点及自定义图标，也可以使用图片如果标题和详情还不足以满足您的需求，你还可以插入自定义的html代码如果样式不满意，可以加入自定义的父类class，然后根据css的权重重新定义样式...

学习最好的方式就是一边看文档，一边动手，这样可以加深记忆。关于canvas绘制文本的内容你可以点击此处查看 例子 ，进行更好的互动学习。渲染文本方式填充文本：fillText(text, x, y [, maxWidth])边框文本：strokeText(text, x, y [, maxWidth])参数说明：text:要渲染的文本内容x:开始渲染文本的x坐标y:...

canvas应用——将方形图片处理为圆形

前段时间写了一个canvas应用——将方形图片处理为圆形 ，最近就想把这个完善一下，所以就再补充一个圆角矩形的canvas处理方式。例子你可以直接点击此处查看 例子 ，先一睹为快。 参数 参数 默认值 描述 img 图片(img)对象 type 0 设置生成图片的大小：0设置生成的图片大小是以图片设置的css大小为准，1设...

介绍fxss-rate评分插件是基于jQuery的插件，支持全星、半星、小数星、未选中星等多种显示样式，并且支持评分操作，不过操作评分的时候仅支持全星评价。demo地址：http://www.fxss5201.cn/project/plugin/fxss-rate/ github地址：https://github.com/fxss5201/fxss-rate ，如果感觉不错的话点个Sta...

介绍colorFormat.js是将颜色值转换为你需要格式的JavaScript库，现在仅支持浏览器支持的HEX/RGB/RGBA/HSL/HSLA等5种格式，任意格式之间互相转换。演示地址：http://www.fxss5201.cn/project/plugin/colorFormat/ 。可能颜色互转的时候有些微差距，这是由于JavaScript在小数计算时不够精确或者对数据进行了四舍五...

现代浏览器发展的越来越智能，新增了很多的效果，比如说input输入框，当将其type设置为number的时候，在其获得焦点的时候，滚动鼠标的滚轮可以增加其数值，，但在有些情况的时候并不太适合，比如说在表单中，当表单比屏幕高度大的时候，上面的填完填写下面的内容的时候，一般人都是直接滚动鼠标滚轮来滚动液面，但是如果某个number输入框还在焦点的时候，滚动滚轮会使其数值改变，这个一般都是不希望的，所以需要禁止掉滚动事件。

我们现在操作电脑最常用的就是鼠标，对于鼠标来说，左右键的处理事件必不可少，但是鼠标中键的上下滚动也可以在页面中做出相当炫的效果。

setTimeout()和setInterval()可以用来注册在指定的时间之后单次或重复调用的函数。

location对象中search属性返回的是问号之后的URL，这部分通常是某种类型的查询字符串，是用来参数化URL并在其中嵌入参数的，那么如何在页面中用js来获取到所有的参数呢？

阶乘指从1乘以2乘以3乘以4一直乘到所要求的数。0! = 1; 1! = 1; 2! = 1 * 2 ; 3! = 1 * 2 * 3; n! = 1 * 2 * 3 * …… * n ;我们在代码里面肯定是不可能这样实现的，因为n的不确定性，所以我们要写一个函数来实现。

假如说有如下的需求： input的value部分有用，部分无用，我们希望input框获取焦点的时候直接选中无用的部分。我们就需要用到下面的主角：HTMLInputElement.setSelectionRange()，支持我们设置开始位置和结束位置，来实现input的选中效果。

不要将原始布尔值的true和false与Boolean对象的真或假混淆。任何一个值，只要它不是 `undefined`、`null`、 `0`、`NaN`或空字符串（`""`），那么无论是任何对象，即使是值为假的Boolean对象，在条件语句中都为真。

在项目中，针对一些时间处理的时候，难免会遇到要计算某年某月有多少天，这个大家都知道：一、三、五、七、八、十、腊(十二月)，是31天，四、六、九、十一是30天，二月又分为闰年29天、非闰年28天，但是这样的话就有会涉及到判断闰年，就比较麻烦，那有没有什么简单的方法呢？答案是有的：javascript中Date()对象的getDate()是获取时间对象对应于一个月中的某一天（1~31），当设置为0...

将table数据转为Excel表格放到前端来做可以减少服务器的压力，而且不受网速影响，速度响应快。下面是两个例子：原生js实现table数据转为Excel表格jquery.table2excel.js实现table数据转为Excel表格原生js的主要函数如下：function getExplorer() { var explorer = window.navigato...

我们在做移动端项目的时候，经常会遇到手机旋转的一些事件，对于安卓手机，在QQ和微信中我们可以用下面这行代码禁止浏览器横屏（安卓手机的QQ和微信用的都是X5浏览器）：&lt;meta name="x5-orientation" content="portrait"&gt;UC浏览器强制竖屏：&lt;meta name="screen-orientation" content="p...

前段时间做的一个集助活动，其中有一个倒计时，需要计算两个时间节点之间的差值，然后转化为时分秒，我用的是将两个时间节点传入new Date()，然后getTime()计算差值，代码大致如下：// 仅是两个时间点是同一天的简单换算function timeFormat(newTimeStr, oldTimeStr){ var newTime = new Date(newTimeStr)....

momentjs是一个用于解析、验证、操作和格式化日期的轻量级JavaScript日期库。使用方式：&amp;lt;script src=&quot;moment.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;script&amp;gt; moment().format();&amp;lt;/script&amp;gt;当前你也可以引入中文语言包：

本文转自：https://uedsky.com/2016-06/mobile-modal-scroll/问题众所周知，移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是臭名昭著的滚动穿透问题。之前搜索了一圈，找到下面两种方案：css 之 overflow: hidden.modal-open { &amp;, body { o...

元素的位置是以像素来度量的，有两个不同的点作为坐标系的原点： 文档的左上角 在其中显示文档的视口的左上角 在顶级窗口和标签页中，视口只是实际显示文档内容的浏览器的一部分：他不包括浏览器的“外壳”（如菜单、工具栏和标签页）。针对框架页中显示的文档，视口是定义了框架页的&amp;lt;iframe&amp;gt;元素。 无论在何种情况下，当讨论元素的位置时，必须弄清楚所...