weixin_44823731的博客

网上有很多格式化日期的函数，你会用，但你真的知道它的原理吗？// 输入：time, fmt。fmt输入例子：'yyyy-MM-dd'或者‘yyyy年MM月dd天’或者'mm:ss'const formatDate = (time, fmt) => { // 转成日期对象 const date = new Date(time); // 由于年一般是4位，我们先特殊处理 if (/(y+)/.test(fmt)) { // 使用正则表达式匹配y的部分 fmt = fmt.re

前端面试知识点1.js数据类型2.浅拷贝和深拷贝1.js数据类型值类型：string、number、boolean、symbol、undefined引用类型：object、function、array、null值类型和引用类型的区别：值类型的变量存储的是值，而引用类型的变量存储的是地址。当引用类型的赋值变量a赋值给另一个变量b，当b修改属性值的时候，a的值也会跟着改变。看例子:引用类型：var obj = { id: 1 }var newObj = objnewObj.id = 2

1.节点查找元素：1.根据id查找元素，只返回第一个： document.getElementById('id')2.根据类名查找元素，返回一个HTMLCollection：document.getElementsByClassName('类名')3.根据标签名来查找元素，返回一个HTMLCollection：document.getElementsByTagName('标签名')4.css选择器，返回第一个：document.querySelector('css选择器')5.css选择器，返回一

js异步进阶知识1.promise1.1 promise的三种状态2.async/await面试题：3.js事件轮询event-loop1.promise1.1 promise的三种状态pending：等待状态，或者说是初始化状态resolving：成功状态。进入thenrejecting：失败状态。进入catch状态转变：pending → resolving 或者 pending → rejecting。只有这两种的状态转变，并且状态是不可逆的。then和catch改变状态：then里

1.什么叫提升？提升：就是js代码执行之前引擎会进行预编译，预编译期间就会将变量声明和函数声明提升到其对应作用域的最顶端。提升一般是对用var关键字申明的变量或函数。let、const关键字申明的没有提升。来个小例子说明一下：console.log(a) // undefinedfn() // this is fnvar a = 1function fn () { console.log('this is fn')}这段代码的执行顺序：function fn() { console.

注意：js箭头函数中，没有属于自己的this关键字，有的话都是来自于父级作用域。注意：js箭头函数中，没有arguments关键字。如果你想要获取arguments参数，就不要写成箭头函数。arguments：是一个数组，里面存放这传进函数的每一项形参。...

let scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop因为由于浏览器兼容问题，我们就用了三个api，反正最后肯定有一个有返回值的。

1.字符串的padStart、padEnd方法：'a'.padStart(3,'1') // 结果：11a'a'.padEnd(3,'1') // 结果：a11'a'.padStart(3,'1'):当字符串长度小于3的时候，就在开头填充1。大于等于3就返回原本的字符串'a'.padEnd(3,'1'):当字符串长度小于3的时候，就在结尾填充1。大于等于3就返回原本的字符串2.Number类型的toFixed方法var a = 1.66var b = 1a.toFixed(2) //

题目：前言：这道题的难度是困难的级别，但是如果你选择对的数据结构来的话，这道题其实很简单的。下面我说一下使用图的数据结构来解决这道题。解题思路：1.我们可以把输入的字符串的字符看作一个路标，根据这些路标来走。如果根据这些路标走到的终点是合法的，那么我们就返回true，否则就返回false。2.绘制图。3.说明上述的图：我们开始的时候是从0出发，如果是遇到空格，我们就自身循环，不移动，如果遇到数字0-9我们就移动到2这个地方。图的移动方法就这样。4.把图变成js的对象： const gr

1.安装npm i create-keyframe-animation2.导入import animations from 'create-keyframe-animation'3.在transition的enter或leave钩子函数中使用 // 定义动画内容 const animation = { 0: { transform: `translate3d(${x}px,${y}px,0) scale(${scale})` },

制作过程遇到的难点：制作全屏背景图片：播放页面的背景图片使用了高斯模糊，由于到css的一样样式不太了解，制作起来耗费了一些事件。背景图片的高斯模糊使用了filter样式：filter:blur(20px)。在查阅资料的时候，发现了filter还有一些强大的功能，就是我们国家公祭日的时候，有些网站就会变成了灰色，就是用了filter这个样式：filter: grayscale(100%);。有兴趣的可以去了解一下。制作中间区域：因为中间区域是需要了装两个div的，一个是歌曲的图片，另一个是歌词。刚开始的

开发过程中遇到的难点：进入页面没有开场动画：需要为transition标签添加apper属性，这样才会有出场动画返回按钮、标题和按钮可以通过定位的方式来实现。放背景图片的div的宽高比例是10：7，我们可以通过设置宽度100%，padding-top为70%。因为padding和margin的值百分比都是相对容器的宽度来计算的。我们需要一个背景盒子，在列表滑动的适合，他也跟着滑动，这样向上滑的时候就会遮住背景图片了。存储列表的div，用绝对定位，我一开始的想只通过css来把他和用来遮住背景的di

简单使用jsonp插件1.安装npm install jsonp2.导入import jsonp from 'jsonp'3.使用jsonpjsonp(url,options,(err,res) => { console.log(res)})url：就是请求的地址options：一个对象param：用来指定接收回调函数名称的变量（默认是callback）timeout：发出超时错误的事件。0禁用（默认是60000）prefix：jsonp响应的全局回调函数的前缀（默认

知识点：better-scroll的生命周期函数：scrollEnd（页面滚动完自动调用）,beforeScrollStart（页面滚动前调用）计算slider的宽度：slider的宽度 = 轮播图的数量 * 一个图片容器的宽度。如果你要实现循环播放，你就要多给两个图片容器的宽度，这个better-scroll内部用来克隆第一个和最后一个轮播图，实现无缝首尾切换。屏幕大小变化的时候为什么不需要两倍的宽度？ 答：因为已经克隆了第一个和最后一个轮播图，dom上已经多了两个轮播图元素，此时我们this.c

前言：最近做了慕课网上的vue播放器，做的过程中，花费了大量的时间去找api，为了方便大家学习，特意写了个后台来抓取qq音乐的api，有需要的可以粘贴运行，处理一下跨域就能用了：const axios = require('axios')const express = require('express')const app = express()const Router = express.Router()// 获取推荐歌单app.get('/api/apiData', (req, res)

抓取各大网站api，让你的前端开发生活充满动力

使用svg和circle来实现进度条。circle标签的属性：cx：圆心的x坐标cy：圆心的y坐标r：圆的半径fill：填充的颜色stroke：边框的填充的颜色stroke-width：边框的大小stroke-dasharray：圆的周长2PIRstroke-dashoffset：等于周长就是边框空白，等于0就填充完边框实现原理：画出两个圆，两个园的边框填充颜色不一样，填充第一个园的边框，动态改变第二个元的stroke-dashoffset的值，让它从圆的周长变到0，然后填充完整个边.

处理在js中因为浏览器兼容而产生的重复的代码

京东、淘宝等网站中得输入框搜索提示和搜索关键字变色。

element-ui的表单验证和官网没提及的隐藏功能

带你手写原生ajax和使用promise封装原生ajax

promise的一些常见面试题

5种方法实现数组去重

概念终究还是概念，实践才能真正理解的其中的精髓！

使用H5制作验证码功能

掌握vue原理，从源码入手！

前言：在我们写网站，我们往往都想要向用户展示一些数据，比如访问数，文章的点击数等等。如果我们只是用数字来向用户展示的，用户很可能会感觉到枯燥，因为数据的显示实在使太单一的。所以今天我来教大家来用H5的画布api来绘制饼状图，让你的网站更加高大上。直接进入正题，先展示成果和源码。最终结果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta

前言：在csdn博客中，有很多吸引着我们的作品，我们点进去的时候，会不由自主的感叹这些作品有多牛逼，狠下心来表示我要把这个作品弄懂，自己写一个跟博主差不多的作品出来。但是当我们看到源码的时候，心里表示一万个卧槽，这代码量太多了，无从下手，还是把这篇博客放到我的收藏夹里吃灰去吧。下面我来分享一下我阅读其他博主的优秀代码思路，希望对各位有所帮助。注：由于本人是学前端的，所以下面的例子使用前端的代码来讲述！（其实无论前端还是后端代码，阅读的思路都差不多）说明原理的例子：前端canvas粒子动画背景（带鼠标跟

应用场景：我们再开发自己的网站或者博客的时候，都会有一个上传头像的并且预览的功能，所以今天就教大家如何实现这一个功能图片预览功能的实现步骤：第一步：我们需要要及时的获取用户上传的文件，所以我们要为input输入框添加onchange事件。第二步：获取用户上传的文件，读取该图片。第三步：把读取到的内容展示到页面上。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta

看懂原理，不用看别人代码也能写

前提：游戏玩腻了？作为一名合格的程序员，应该自己开发小游戏来玩，玩腻了，自己就再去开发个游戏，利用这一特点实现永动机。既可以学习，也可以娱乐。本次开发的是贪吃蛇小游戏。使用技术：html、css、原生js、部分es6语法贪吃蛇实现原理：利用绝对定位的left和top来小蛇进行移动<!DOCTYPE html><html><head> &lt...

须知：我们在学一个新的东西的时候，例如我们第一次见到电饭煲，我们要知道什么是电饭煲（定义），知道电饭煲有什么用（作用），知道电饭煲怎么用（用法），如何用电饭煲煮一顿好吃的饭（实践），做出来之后你就真正懂了电饭煲。学习闭包的过程亦是如此，所以我们不用害怕学习新事物！闭包专题1.闭包的定义2.闭包的作用3.闭包的用法4.闭包的应用5.经典面试题6.闭包的缺点1.闭包的定义定义：闭包是指有权访问...

前提须知：在前端web开发中，我们很多时候需要对字符串进行一些操作，比如我们需要知道一个字符串是否包含其他字符串。对于查找字符串，有很多种的方法，为了让我们的开发过程更加简便，所以我们需要挑选合适的方法来进行开发。查找字符串的四种方法1.indexOf(searchValue[,formIndex])2.lastIndexOf(searchValue[,formIndex])3.search(字...

应用场景：在我们前端web日常开发中，常常需要对字符串进行一些操作，比如字符串的截取。在一段字符串中，截取我们所需要的内容。截取字符串的常用方法:1.splice(beginIndex[,endIndex])方法2.substring()方法3.substr()方法1.splice(beginIndex[,endIndex])方法beginIndex：当beginIndex为正数时：表示开始...