- 博客(69)
- 收藏
- 关注
RSS订阅原创 原生小程序，左边不顶宽，右边滑动（scroll-view）
想法：大盒子写display：flex,右边flex：1，自适应宽度，但是这样写了之后右边划不动。至于为什么用width:0;目前没有找到原因但是这样就可以做到。左边xxx0固定，右边得部分滚动~解决办法，右边flex：1;
2023-11-13 14:44:38
558
原创 jquery的$
jQuery是什么jQuery是一个快速、简洁的JavaScript框架，jQuery设计的宗旨是“write Less，Do More”。jQuery的$使用过jQuery的应该都知道jQuery的$，看到源码中的这一段就能知道相当于jquery的简写，jquery有两种用法，一种是用$表示，还有一种是jQuery // Map over jQuery in case of overwrite var _jQuery = window.jQuery, // M
2023-11-13 14:36:33
119
原创 vant组件van-popup中 van-popup--safe怎么去掉（距离底部有安全距离）
出现弹窗固定高度但是会滚动的问题，把这个放在wxss中即可。
2023-11-07 15:29:49
182
原创 如何让微信小程序弹窗滚动条设置在最上面
最近发现一个事情搞得很烦，微信小程序的弹窗内容可以滚动的时候，要保证每一次打开都在最上面，研究了一下终于发现了怎么解决。
2023-05-08 11:14:00
1731
1
原创 this指向面试题
var person1 = new Person('person1') var person2 = new Person('person2') person1.obj.foo1()() person1.obj.foo1.call(person2)() person1.obj.foo1().call(person2)
2022-09-06 15:07:56
264
2
原创 可选链操作符( ?. )和空值合并操作符（??）
意外从朋友那里看到的时候百度了下，可能百度方式不对，居然没看到，后面发现还挺好玩的，一个一个来说下；可选链操作符( ?. )官方定义可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。用法在
2021-07-08 18:28:39
261
原创 js画一条快乐的胖丁鱼
朋友echarts周围要花一个像时钟一样的光圈，突发奇想像画一条????，然后就有了这篇博客，有时间，你还可以画一张你喜欢的小可爱的脸，把里面的东西稍微改动下，就可以有个嘴巴，耳朵，鼻子，刘海~效果图颜色是有那么一丢丢奇怪啦，毕竟没有水的????没有一条不奇怪的~源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="view
2021-04-13 09:57:22
227
1
原创 面试题整理vue 小程序 es6（初级前端适用）
最近面试被问到的最多的问题关于vue 小程序 es6整理(武汉初级前端)，已经上岸vuetop1 你知道vue的生命周期钩子吗，简单解释下// Vue的实例化对象已经创建完毕，只是传入的参数（data,methods//,el都没有设置到Vue的实例上去），所以我们获取不到data里面的数据，beforeCreate() { console.log("beforeCreate"); console.log(this.message); console.log(this.a
2021-04-06 17:30:09
255
原创 echart小程序bug cannot read property ‘hide‘ of undfined
小程序使用echarts报错cannot read property ‘hide’ of undfined找了很久没找到，后来发现在init里面，没有获取到元素加上这个就好了如果切出去在回来没有图并且报错在onshow获取数据即可
2021-03-29 10:56:28
188
原创 小程序入门-02
上一篇文章简单的给大家给介绍了一下什么叫小程序，以及一些简单的东西，下面带大家看点实际的东西注册，创建小程序这个由于比较简单，就不带大家一步步看，大家自己可以跟着介绍来做，在创建时记得如果是自己的demo不要选择云服务上面是简单的介绍大家可以对照使用板块介绍点击完新建后的状态，如下，为大家将每一步代表什么写了，大家自己取用相信大家看完应该大概懂每一步的作用了，下面为大家着重要的常用的介绍一下大概的使用，方便快速入门如果大家有兴趣可以做相应改变，试试，这里不给大家一一试，具体的大家可以官
2021-01-18 19:41:15
113
原创 微信小程序入门-01
在学习小程序之前，我们必须要明白这几点什么是小程序？小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。直接一点跳一跳，斗地主就是是小程序微信小程序简介小程序就是一款简易版的APP，不过他不需要下载，可以直接使用，相比较传统的APP依托于手机进行操作打开，那么小程序的话，就是依托于各个平台上面一款APP，常见的有：微信小程序、百度小程序
2021-01-18 18:53:07
224
原创 Vue修饰符
一、修饰符是什么在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理二、修饰符包含哪些vue中修饰符分为以下五种：表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符三、修饰符的作用表单修饰符在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model关于表单的修饰符有如下：lazy.
2021-01-11 19:25:25
1409
原创 VUEX---快速熟悉vuex
一、什么是Vuex?Vuex是一个专为vue.js应用程序开发的状态管理模式。当我们构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态二、Vuex的五个核心概念StateGettersMutationsActionsModules其中State和Mutations在任何项目都会接触到的核心概念。为什么说这两个是最核心的呢？第一、首先State是我们唯一的数据源，也就是说我们需要把组件里面的一些状态提取出来放到State里面去，State是我们唯一的载体，我
2021-01-11 18:56:26
144
原创 可编辑非input,texrarea+vue实现双向绑定(以div标签为例)
想法来源关于输入，input标签和textarea标签可以满足我们90%以上的需求，但有些时候有些一些特殊需求，或者在改别人的项目时，换标签不方便，这个时候需求就没办法无法满足。此时，我们就可以使用div等一些标签来实现本文涉及知识点属性：contenteditable是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。当标签加上这个属性时，就可进行内容编辑，来实现输入的效果。并且实现placeholder效果,如下//html<div>请在下方
2021-01-05 20:16:11
973
原创 axios的参数配置(常用)
用法axios({ method: 'get', // post、get、put、delete.... baseURL: '', // 请求的域名，基本地址，公共的路径 url: '', // 请求的路径 params: {}, // get参数会将请求参数拼接在url上 data: {}, // post会将请求参数放在请求体中 headers: {}, // 设置请求头，例如设置token等 timeout: 1000, // 设置请求超时时长，单位：ms withCr
2021-01-04 19:26:17
10773
原创 OffSet家族2-offsetWidth,offsetHeight ，offsetLeft,offsetTop
上一篇文章详细的为大家介绍了offsetParent,本篇文章将之前没有说完的说完，我们先来看offsetWidth,offsetHeightoffsetWidth,offsetHeight1.定义老规矩，首先我们先看一下官方的定义：HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽
2020-12-28 19:55:51
321
原创 webpack打包工具基本使用保姆级教程
1. 首先你要先有node环境，如何让下载安装这里不再详细解释，大家可以官网自行安装再回来，nodejs官网，nodejs中文网2. 创一个文件夹，在下面打开终端3. 初始化在终端中运行npm init -y3. 下载webpack在终端中运行npm install webpack webpack-cli --save-dev4.在文件夹下创建以下目录结构、文件和内容 webpack-demo |- package.json+ |- /dist+ |-index.html+
2020-12-26 14:08:19
577
1
原创 看到npm这一篇，能让你比同龄人少走50步
这篇文章主要来说一下npm,会围绕什么是npm,什么情况下用npm,以及一些常用的指令，和一些个人对新人使用npm的一些建议什么是npmNPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题组成官方是这么解释的：npm 由三个独立的部分组成：网站 是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。注册表（registry），是一个巨大的数据库，保存了每个包（package）的信息。命令行工具 (CLI)通过命令行或终端运行。开发
2020-12-21 19:25:56
93
原创 OffSet家族1-offsetParent
说到offset家族，我们分为三个点来分析：offsetParentoffsetTop、offsetLeftoffsetWidth、offsetHeight下面我们逐条分析：offsetParent首先我们先看一下官方的定义：HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 “none” 时，offsetParent
2020-12-18 16:06:48
234
原创 ES6中的类（Class）个人理解
概述ES6中提供了更接近面向对象（注意：javascript本质上是基于对象的语言）语言的写法，作为对象的模板引入了class (类)，通过 class 关键字定义类。class 的本质是 function。它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。类的基本语法 // 定义类 class Baby { constru
2020-12-12 11:15:49
290
原创 ES6实用属性--解放双手下篇
本篇文章接着上面的文章介绍ES6新增的一些好用的属性-函数参数默认值 、模板字符串、解构赋值、…运算符、箭头函数本篇文章将会从下面五个小点来叙述：PromiseLet与Const类对象属性简写1. Promise说到Promise,我们用简短的概念描述一下它：Promise 是一个对象，它可以解决异步（回调地狱）的问题，但是promise本身不是异步的，一个 promise 会有 3 种可能的状态：fulfilled（已完成）、rejected（已拒绝）、pending（等待中），Prom
2020-12-11 15:32:01
141
1
原创 ES6实用属性--解放双手上篇
ES6S6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6已经不再是JavaScript最新的标准，但是它已经广泛用于编程实践中。如果你还没用过ES6，现在还不算太晚…我心中的神仙们我心中的神仙们，排名不分先后：函数参数默认值模板字符串多行字符串解构赋值对象属性简写箭头函数PromiseLet与Const类模块化1. 函数参数默认值...
2020-12-05 10:58:28
183
原创 this关键字从0实现100突破
在js中很多人都会被this难住，本篇文章我们通过概念和实例来攻克this的难关目录官方概念个人理解以及小案例在全局范围内 普通函数进行调用 this指向window对象方法里面的this 指向的是的当前这个对象例题定时器，匿名函数，立即执行函数如果没有修改this的指向 name定时器里面的回调函数的this一定是指向window的箭头函数里面没有this 他的this是指向于父级执行上下文的this自定义构造函数函数里面的this总结第一题第二题官方概念首先，我们要了解this,在官方文档
2020-12-04 14:31:10
121
原创 ES6第七种基本类型Symbol--做一个孤独的靓仔
为什么要SymbolSymbol的目的就是为了实现一个唯一不重复不可变的值，任何一个Symbol都是唯一的，不会和其他任何Symbol相等。很多时候其实我们都需要用到唯一不重复的值。比如我们给一个DOM节点做动画，那么我们需要判断动画是否正在执行。这个时候一般的做法是给DOM节点加上一个属性（或者classname之类的）做一个标记，比如下面这样：d.isMoving = true; //正在执行动画然后问题就来了，这样做很容易产生冲突，万一你用了一个三方动画库，人家也是用 isMoving
2020-11-29 14:42:50
371
3
原创 常见解决跨域的方案
为什么会出现跨域问题出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）什么是跨域当一个请求url的协议、域名、端口三者之间任
2020-11-28 16:14:34
77
原创 使用moment.js轻松成为时间管理大师
什么是moment.jsMoment.js是一个轻量级的JavaScript时间库，日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。Moment.js不会修改本机Date.prototype，而是为Date对象创建一个包装器。 要获取这个包装器对象，只需调用moment（）。如果你想添加自己的功能，可以通过moment.fn进行自定义。接下来，我将按照这些操作对Moment.js中的Doc进行整理分类，方便学习和日后的查阅。常用的方法以及使用首先第一步引
2020-11-22 13:33:20
424
原创 原型链经典面试题getName()
这篇文章为大家理一下原型链的经典面试题getName()题目先放上完整的题目 function Foo() { getName = function() { console.log(1); } return this; } Foo.getName = function() { console.log(2); };
2020-11-20 17:52:08
728
原创 原生Ajax入门，看这一篇事半功倍
Ajax概念Ajax（Asynchronous JavaScript + XML）：异步JavaScript和XML，是为了网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面；Ajax的使用步骤1.创建请求对象var xhr=new XMLHttpRequest();这里命名尽量用xhr2.调用open方法open方法中需要传入两个参数，分别为请求方式和请求地址//请求方式为getxhr.open("get","请求地址?需要请求的数据")//请求方式为post
2020-11-15 17:54:30
117
原创 前端面试题之易错面试题系列--part2
前端面试题之易错面试题系列–1后续题目四（符号的优先级）下面这段javascript代码, 输出什么 var msg = "hello"; for (var i = 0; i < 10; i++) { var msg = "hello" + i * 2 + i; } console.log(msg);先看答案 hello189解释这道题的难点不在域.而是String拼接和符号的优先级.//循环到最后的时候i=9 "hello
2020-11-12 20:33:53
208
原创 jQuery--获取盒子宽高
本篇主要介绍如何获取盒子的宽高<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> he
2020-11-07 14:42:57
1880
1
原创 前端面试题之易错面试题系列--1
最近正值秋招火热的阶段，过完年也会有很多人面临找工作，大学生的春招也要开始，于是做了一个易错面试题的组合，会不定期分享近期看到的易错的面试题题目一（预编译）<SCRIPT LANGUAGE="JavaScript">var bb = 1;function aa(bb) { bb = 2; alert(bb);};aa(bb);alert(bb);</SCRIPT>输出结果第一个为2，第二个为一第一个为二很简单，那么第二个为一是为什么呢？因为上
2020-11-07 13:19:03
252
原创 Bootstrap --手写栅格系统
本篇文章主要从栅格系统的原理，以及栅格系统的一些应用来说明；目录栅格系统原理我所理解的栅格系统栅格系统的应用总结栅格系统原理我们要了解栅格系统的原理，首先先看看官方文档的解释官方文档这么解释他：栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局；我们再来看看官方爸爸解释的原理：这里方便大家看我们这里就直接偷了官方的文档解释截图；官方的话可能不是那么通俗，那么栅格系统的原理到底是什么呢？我所理解的栅格系统栅格系统是将一行等分成12份或者24份，分别根据每一行的每一
2020-10-31 15:03:59
341
原创 globalCompositeOperation的小栗子---刮刮卡(含源代码）
上一篇博客我们讲解了canvas的globalCompositeOperation的属性，了解了源图像和目标图像以及他的一些属性值，这一篇我们运用这个属性来做一个小案例–刮刮卡实现先把图片放上去，然后放一个一样大的canvas标签放在上面，。以实现我们后面的刮开效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewp
2020-10-31 14:11:52
339
1
原创 HTML5中canvas的globalCompositeOperation属性
小时候玩过的刮刮卡，长大玩的刮刮乐，如果用电脑实现是什么样子呢？知识点要想实现刮刮卡，我们要了解canvas的globalCompositeOperation属性我们首先要知道什么是目标图像 和源图像目标图像：画布上已经存在的图像源图像:即将画到画布上的图像常用的四组属性‘source-over’ 重叠区域 源图像在目标图像上destination-over 重叠区域,源图像在目标图像下...
2020-10-24 15:53:24
703
原创 将拖拽的img转换成获取64位base码（附原码）
灵感前几天在浏览器的一个网站上想转换照片变成视频，发现拖进去的图片转换成了64位的base码，所以想着自己写一下思路基本框架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
2020-10-24 00:28:55
444
原创 虽然我是一个程序员，但是我有一张充满艺术气息的脸
知识普及本图采用html和css以及css3来完成涉及伪元素选择器（::after,::before)，阴影，渐变等；::before,::after在不添加新元素的同时，在元素的内容前面或者后面插入新内，需要结合content一起使用盒子阴影 box-shadow: h-shadow v-shadow blur spread color inset（水平阴影的位置，垂直阴影的位置，模糊距离，阴影尺寸，颜色，将外部阴影 (outset) 改为内部阴影。）渐变分为线性渐变，径向渐变...
2020-10-17 16:09:09
137
1
原创 如何用svg实现水波动画（点击出现随机圆，移开消失）
这篇文章用于实现如何用svg实现在相应画布上随意点击出现一个随机大小随机颜色的圆，松开手，圆慢慢变大，变淡消失（这里不考虑兼容性）需求实现创建画布<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2020-10-13 19:48:28
707
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人