前端王睿
前端王睿_个人页
前端王睿
文章
65
问答
0
视频
0
个人介绍
3年Web前端开发工程师，目前就职于上海知名媒体——新闻晨报，个人公众号：前端微站
擅长的技术
-
发表了文章 2018-08-19
微信小程序如何裁剪图片作为转发封面
我们知道微信小程序的转发时的封面图片比例固定为5:4，具体内容详见小程序开发文档： 字段 说明 默认值 最低版本 title 转发标题 当前小程序名称 path 转发路径 当前页面 path ，必须是以 / 开头的完整路径 imageUrl 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。
-
发表了文章 2018-07-30
如何用原生JS写Tab切换
1. 基本思路 ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式，然后给当前Tab选项添加标记样式，给当前Tab选项添加显示样式 2.
-
发表了文章 2018-07-24
如何获取数组中最大3项的索引值？
一、需求分析 1. 数组最大3项 看到这个，首先就应该想到排序，我们可以先将数组从大到小进行排序，然后再获取排序后的数组前3项即可。 所需函数： 排序： sort()获取前3项： filter() 2. 获取索引值 当我们将数组进行排序后，数组的索引值会发生变化，我们便无法再获取原始数组的索引值了，所以我们得在排序前对数组进行处理。
-
发表了文章 2018-07-15
JS数组排序
JS数组排序方法有两个：reverse()和sort()，其中reverse()可将数组进行倒序，而sort()则可将数组项灵活地进行升序或降序排列。
-
发表了文章 2018-07-09
CSS3背景裁切属性——background-clip
CSS中的background属性想必大家已经用了无数遍，但是对于CSS3属性background-clip你可能还不太了解，那么今天我们就专门来聊聊这个属性。
-
发表了文章 2018-07-02
Webpack轻松入门（五）——自动刷新
我在之前文章Webpack轻松入门（二）——CSS打包中提到过Webpack中的自动打包功能，很简单，在webpack.config.js中添加 watch: true 配置，打包一次之后每次代码更新后都会自动进行打包而无需重复输入命令行。
-
发表了文章 2018-06-20
【小白教程】趣味表白效果
这次我们玩点有意思的，先看看效果→趣味表白效果 最好是在PC端预览哦，下面出简单的小白教程。（注意：此教程仅适合前端小白，高手请绕过） 1.
-
发表了文章 2018-06-18
Webpack轻松入门（四）——HTML打包
到目前为止，有关Webpack最基础的内容差不多已经讲完了，其中包括Webpack运行的基本流程、CSS的打包和图片的打包，也就是说，当你掌握这几节之后，基本上就能像以前不用Webpack时一样愉快地写代码了。
-
发表了文章 2018-06-04
Webpack轻松入门（三）——图片打包
我们知道，在Webpack中，js文件类型是能够被识别并直接打包的，而其他文件类型（如CSS和图片等）则需要通过特定的loader来进行加载打包。
-
发表了文章 2018-05-30
教你两招用纯CSS写Tab切换
说到Tab切换，你可能首先想到的就是使用jQuery，短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的，是使用 0 行JS代码来实现Tab切换！ 具体效果如下： Tab切换 方法一：模拟单选框原理 关于模拟单选框，在我之前文章中有讲到，详情请戳→纯CSS模拟单选框和复选框 该方法大致原理如下： 当用户点击label元素时，该label所绑定的input单选框就会被选中，同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式。
-
发表了文章 2018-05-14
微信小程序开发之路（五）
很久没有写有关微信小程序的文章了，正好最近在做小程序项目，也遇到了一些小问题，与大家分享一下。 一、如何在video、map和canvas等组件上定位元素？ 在小程序中video、map和canvas等组件是原生组件，层级是最高的，我们无法通过CSS样式来控制其层级，但是有时候我们确实需要在这些组件上定位元素，比如文字和图片。
-
发表了文章 2018-04-25
Webpack轻松入门（二）——CSS打包
上一节讲到如何使用Webpack实现最基础的打包功能，但是发现以下几个比较突出的问题： ① 我们只打包了一个JS文件，多个文件该如何打包？ ② CSS样式该如何打包？ ③ 每次写完代码想要看运行结果都需要手动输命令打包，反而降低了开发效率 没关系，本文就是为解决这些问题而来的。
-
发表了文章 2018-04-18
Webpack轻松入门（一）——基本流程
很多还未接触或刚接触Webpack的朋友总会觉得Webpack很难，要安装这个安装那个，要写一大堆的配置，要输一大堆的命令，还要学一大堆的语法，觉得学习成本太高，不用它代码也可以写得很好。
-
发表了文章 2018-03-26
我为什么要使用Webpack?
简单讲讲我与前端的故事吧。 刚接触前端时，所有静态资源CSS、图片和JS都是手动引入HTML页面中，这并没有什么不好，想要什么就引入什么嘛。
-
发表了文章 2018-03-14
[]==[]为false，[]==![]为true
JS真是博大精深啊，看似相等，其实不等，而看似不等，却是相等。 没错，你没有看错，JS就是这么不可思议！ 这个问题涉及到JS基础，通常会出现在前端面试题中，刚开始我对于此问题也是存在疑惑的，但只要明白其原理也很好理解。
-
发表了文章 2018-03-07
JS字符串操作之增删改查
之前写过一篇文章叫JS数组操作之增删改查，今天我就用同样的方式简单介绍一下JS字符串操作中常用函数的用法。 一、增 1. concat() 可以传任何个数的参数，用于字符串的拼接，返回连接后的字符串，而原字符串不受影响。
-
发表了文章 2018-02-13
JavaScript字符串的分割
说完字符串的裁剪，这次来说说字符串的分割。 你可能会有所疑惑，裁剪和分割，这两者到底有什么区别呢？ 裁剪： 一次裁剪一部分子字符串并返回，可使用slice()、substring()和substr()方法实现分割： 一次可将字符串分割成多个子字符串并返回由这些子字符串组成的数组，可使用split()实现 好，了解了裁剪和分割的区别之后，我们接下来看看具体如何使用split()方法来实现字符串的分割。
-
发表了文章 2018-02-05
JavaScript字符串“三剑客”
JavaScript字符串方法有很多，其中有三个方法与字符串裁剪有关，他们分别是slice()、substring()和substr()，我把他们统称为“三剑客”。
-
发表了文章 2018-01-29
手把手教你玩转Vue.js组件（三）
上一节谈到有关Vue.js组件中“传参”的概念，我们使用的是Prop，也就是在标签上自定义属性来向子组件传递数据。这一节我们继续谈谈“传参”，只不过这次不是通过自定义属性，而是通过一个固定的自定义标签，它有个比较特别的名字：插槽。
-
发表了文章 2018-01-23
手把手教你玩转Vue.js组件（二）
这次我们讲讲Vue.js中组件中“传参”的概念，也就是父组件向子组件通信的问题，这一点与函数中的参数传递很像。 我们同样使用上篇文章中的例子： //pop-tips组件 Vue.
-
发表了文章 2018-01-16
手把手教你玩转Vue.js组件（一）
在阅读本文之前，请先确认你是否满足以下几个要求： ① 有一定的前端基础 ② 掌握Vue.js最基本的使用（也许从未使用过组件，没关系，这正是本文所要讲的） ③ 对组件化概念有一定的了解 当然，如果你已经对Vue.js组件运用得炉火纯青，那么恭喜你，你也没有必要浪费时间阅读本文了。
-
发表了文章 2017-12-26
CSS3径向渐变
上次说到CSS3中的线性渐变，表面上看起来似乎有些复杂，但是逐条分解下来其实也没有那么难理解，总结下来无外乎就三点：颜色、方向和位置。那么今天所要讲到的径向渐变相对来说会更复杂一些，不过没有关系，我们同样从最简单的开始说起。
-
发表了文章 2017-12-14
CSS3线性渐变
今天来谈谈CSS3中的线性渐变，有了这个，好多以前必须要用图片才能实现的效果如今可能只需简单一行代码就能实现。 首先看看今天的主角： linear-gradient()。
-
发表了文章 2017-12-06
前端开发常见问题精选（四）
一、Swiper.js的loop模式下，如何正确获取索引值？ Swiper.js，相信作为前端开发者的你一定知道它吧。它几乎可以用来制作任何形式的轮播图，非常方便和实用。
-
发表了文章 2017-11-27
Canvas与图片压缩
之前写过一篇有关Canvas图片处理的文章，今天我们讲讲如何使用Canvas来压缩图片。 Canvas图片压缩流程 接下来我将以具体实例为大家讲解Canvas图片压缩的具体流程。
-
发表了文章 2017-11-21
jQuery中的事件绑定
之前讲了这么多的原生JS，这次换换口味吧，讲讲曾经风靡一时的JS库——JQuery。 一、jQuery事件绑定的方法 1. 直接使用事件方法 【jQuery对象】.
-
发表了文章 2017-11-14
图片在固定宽高盒子中的显示问题
我们经常可能会遇到这样一个情况： 在一个固定宽高的盒子中，要放置一张宽高比不定的图片（比如说后台上传的图片），这时候图片应该如何设置样式呢？ 有人可能会说，那还不简单，图片宽高设置成父级盒子的宽高不就行了？ 举个例子： /*HTML*/ /*CSS*/ .
-
发表了文章 2017-11-09
【怦然心动】璿而不华：费尽所有力气，只为遇见更好的你
我正在参加怦然心动·邂逅你的11封情书——1111情书交友创作大赛，快来给我写情书吧。 昵称： 璿而不华 地点： 魔都 职业： IT互联网 自荐文章： 摆脱晚睡拖延症其实很简单…… 自述： 大学毕业两年半，目前从事互联网。
-
发表了文章 2017-11-06
FileReader类型之文字读取
一、什么是FileReader类型? FileReader类型实现的是一种异步文件读取机制，通常可以用于读取文本文件和图片文件，而本文只单独讲讲文本文件的读取。
-
发表了文章 2017-10-30
JavaScript模块化编程规范
当一个网站复杂度较高需要多人协作开发时，传统的非模块化编程模式容易导致代码冲突和依赖等问题，而模块化编程的诞生正是为了解决此类问题。然而，在ES6之前，原生JavaScript是不支持模块化的，因此就出现了一系列的JavaScript库来实现此功能，这些库主要遵循以下三种规范： ① CommonJS ② AMD ③ CMD 接下来我就粗略地讲讲这三种规范。
-
发表了文章 2017-10-22
Node.js——通往全栈之路（一）
一、Node.js简介 Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。
-
发表了文章 2017-10-15
前端开发常见问题精选（三）
一、如何禁止微信h5页面默认下拉，并且同时页面局部可滚动？ 众所周知，微信浏览器默认是可以上拉和下拉的，就像下面这样： 微信浏览器下拉 然而，有时候我们需要禁止它，那该怎么做呢？ 1. 禁止页面的touchmove事件 document.addEventListener('touchmove',function(e){ e.preventDefault(); }); 该方法简洁明了，但是问题来了，浏览器默认下拉是禁掉了，可页面却不能滑动了。
-
发表了文章 2017-10-08
微信小程序开发之路（四）
上周由于国庆小长假的缘故未能及时更新文章，在此说声抱歉，之后将继续周更。 好久没有写有关微信小程序的文章了，今天继续讲讲小程序的一些容易踩到的“坑”。
-
发表了文章 2017-09-24
前端开发常见问题精选（二）
一、如何解决Canvas画布在移动端显示模糊的问题？ Canvas画布在PC端显示正常，但是放在移动端却发现整个画布都有点模糊，其实这里有个比较简单的解决方法： 先给canvas标签的width和height这两个属性值乘以2，再设置其样式中的width和height的实际大小，最后注意须将JS中与Canvas相关的数值均乘以2。
-
发表了文章 2017-09-17
教你使用Canvas处理图片
Canvas，中文译为“画布”，HTML5中新增了元素，可以结合JavaScript动态地在画布中绘制图形。 今天，我们不讲Canvas的图形绘制，而是讲如何对图片进行处理。
-
发表了文章 2017-09-10
获取元素大小和位置的五种方式
一、直接获取元素样式属性值 运用之前在JS如何获取元素样式?这篇文章中提到的三种获取元素样式方法便可获取元素大小和位置，但前提是该元素得事先定义了相应样式。
-
发表了文章 2017-09-03
JS如何获取元素样式?
上篇文章讲到如何设置元素样式，本文将继续给大家分享如何获取元素样式。 一、style，只获取标签上定义的行内样式 在这里讲的style用法包括三个：style、style.
-
发表了文章 2017-08-27
JS如何设置元素样式?
一看到这个标题，大家可能首先想到的就是使用“[元素].style.[CSS属性名] = [属性值]”这样的套路去设置元素样式，但实际上，我们其实还有其他方式可以选择。
-
发表了文章 2017-08-20
JS数组操作之增删改查
JS提供了很多方便操作数组的方法，本文所要分享的就是如何快速对数组进行增、删、改、查。 一、增 1、push() 可接收任意数量的参数，把它们逐个添加至数组末尾，并返回修改后数组的长度。
-
发表了文章 2017-08-13
JS闭包问题（二）
在之前的JS闭包问题（一）文章中大概介绍了一下JS闭包，同时讲了闭包与变量之间的问题，今天我们继续聊闭包，聊聊闭包与this对象之间的问题。 我们知道，this指向当前对象，而在全局环境中，this就等于window对象，举个例子： var name ...
-
发表了文章 2017-08-06
前端开发常见问题精选（一）
一、如何在元素自身及其父级宽高不确定的情况下让元素水平和垂直方向上居中？ 这个问题最常见的就是让文字在浏览器窗口中水平和垂直方向居中了，因为文字的宽度和高度均不确定，浏览器窗口的宽高我们也不知道，那这个问题该如何解决呢？ 1、50%定位+translate居中法 html,body{ height: 100%;} .
-
发表了文章 2017-07-30
快速理解Flexbox布局
今天，本文会以尽量精简的文字来介绍Flexbox，代码示例会比以往少很多，因为要全面讲述，估计十篇文章都讲不完…… 一、什么是Flexbox? Flexbox，又叫弹性盒子布局。
-
发表了文章 2017-07-23
单元素实现多重边框效果
在CSS中，要实现同一种效果可能有很多种方式，就比如今天所要讲的多重边框，有人可能会想，那还不简单？要多少边框直接嵌套多少个带边框的DIV元素不就行了么！ 是的，这样确实简单粗暴，但是也会因此产生很多毫无实际意义的元素。
-
发表了文章 2017-07-16
JS闭包问题（一）
之前我写过一篇JavaScript原型与原型链的文章，此属于JS中的重难点。 而闭包，是JS中除了原型链之外又一个重点和难点。 一、何为闭包 所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
-
发表了文章 2017-07-09
简述forEach()、map()、every()、some()和filter()的用法
在文章开头，先问大家一个问题： 在Javascript中，如何处理数组中的每一项数据？ 有人可能会说，这还不简单，直接一个for循环遍历一下就好了。 是的，确实，这是最常见的做法。
-
发表了文章 2017-06-25
一张图让你快速掌握CSS3倒影
示例图片 在CSS3之前，想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式，而CSS3问世之后，想要实现这样的效果变得非常简单，只需一个CSS3属性就可以轻松实现了。
-
发表了文章 2017-06-16
纯CSS制作单页Web应用
在我之前写的使用hash制作单页Web应用一文中，讲到使用Javascript中的location.hash来制作单页Web应用，看到那么长一段JS只是为了实现一个简单的Tab切换，实在是有点大材小用了。
-
发表了文章 2017-06-10
纯CSS模拟单选框和复选框
浏览器默认的一些表单样式都不太好看，就比如说在Chrome浏览器下，默认单选框长下面这样： Chrome下默认单选框 灰不溜秋的，什么鬼，其实我想要下面这样的： Chrome下美化单选框 这样看起来就很不错，还加了动画效果，可是默认的单选框只能改变其大小，像背景颜色啥的并不能改变，那该怎么办呢？ 没关系，既然不能改变其本身，那咱就自己造一个出来。
-
发表了文章 2017-06-04
CSS属性选择器
CSS选择器主要分为五大类：元素选择器，关系选择器，属性选择器，伪类选择器和伪元素选择器。平时用的最多的是元素选择器和关系选择器，而本文主要讲讲用得比较少的属性选择器。
-
发表了文章 2017-06-03
摆脱晚睡拖延症其实很简单……
图片来源于网络 人的行为目的永远摆脱不了八个字：追求快乐，逃离痛苦。 你也许知道熬夜晚睡对身体不好，也许一次次地在内心告诫自己要早点休息，但是你依然还是会在不知不觉中“忙”到深夜。
暂无更多信息
-
发表了文章
2018-08-19
微信小程序如何裁剪图片作为转发封面
-
发表了文章
2018-07-30
如何用原生JS写Tab切换
-
发表了文章
2018-07-24
如何获取数组中最大3项的索引值？
-
发表了文章
2018-07-15
JS数组排序
-
发表了文章
2018-07-09
CSS3背景裁切属性——background-clip
-
发表了文章
2018-07-02
Webpack轻松入门（五）——自动刷新
-
发表了文章
2018-06-20
【小白教程】趣味表白效果
-
发表了文章
2018-06-18
Webpack轻松入门（四）——HTML打包
-
发表了文章
2018-06-04
Webpack轻松入门（三）——图片打包
-
发表了文章
2018-05-30
教你两招用纯CSS写Tab切换
-
发表了文章
2018-05-14
微信小程序开发之路（五）
-
发表了文章
2018-04-25
Webpack轻松入门（二）——CSS打包
-
发表了文章
2018-04-18
Webpack轻松入门（一）——基本流程
-
发表了文章
2018-03-26
我为什么要使用Webpack?
-
发表了文章
2018-03-14
[]==[]为false，[]==![]为true
-
发表了文章
2018-03-07
JS字符串操作之增删改查
-
发表了文章
2018-02-13
JavaScript字符串的分割
-
发表了文章
2018-02-05
JavaScript字符串“三剑客”
-
发表了文章
2018-01-29
手把手教你玩转Vue.js组件（三）
-
发表了文章
2018-01-23
手把手教你玩转Vue.js组件（二）
滑动查看更多
暂无更多信息
暂无更多信息