- 博客(37)
- 收藏
- 关注
RSS订阅原创 在Vue中用better-scroll实现横向滚动
一、滚动的实现原理better-scroll的滚动原理和浏览器原生滚动原理是一样的，当子盒子的高度大于父盒子的高度，就会出现纵向滚动：同理，如果子盒子的宽度大于父盒子的宽度，那么就会出现横向滚动 ( 根本原理 )。二、在Vue中使用better-scroll在Vue中使用better-scroll最需要注意的点就是必须等到页面渲染完成再去执行BScroll的实例化，因为better-scr...
2020-03-10 14:41:24
3246
原创 Vue事件总线（EventBus）使用详细介绍
前言vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。Event...
2019-11-05 14:51:53
202
原创 fastclick.js解决移动端（ipad）点击事件反应慢问题
fastclick.js解决移动端（ipad）点击事件反应慢问题问题的发现上班做项目的时候碰到一个移动端项目，其中有个小游戏，相当于天上掉馅饼，用户需要点击馅饼获得。游戏做好之后在pc端测试是没问题的，安卓手机上测试也是没问题的，但是部分苹果手机就出现了问题，用户点击馅饼没有反应。后来调试的时候，我让这些馅饼静止在屏幕上，这些苹果手机用户就可以点击了。才发现是因为点击事件延迟的原因导致移动的...
2019-10-26 09:42:53
310
原创 JS获取对象属性名小结
JS获取对象属性名小结最近面试遇到问如何获取对象全部属性名的方法，总结一下：对象属性类型分类：1.ESMAScript分类数据类型 又分为可枚举和不可枚举类型访问器类型2.上下文分类原型属性实例属性1.列举自身但不包括原型的可枚举属性名 Object.keys(obj) // 遍历对象function Person(name, age) { this.name = na...
2019-10-23 11:35:42
857
原创 vue-cli2.x中的render: h => h(App)解析
*对于这个，可能es6语法不熟的人很容易产生懵懂，因为我也不熟，所以记录一下，毕竟这也是个重要的知识点。*（一）遇到的问题代码：new Vue({ el: '#app', router,//实例化，表示会使用 render: h => h(App)//vue2.0写法 //以下是vue1.0的写法 //components: { App },//注册组件信息 //...
2019-10-15 08:24:35
198
原创 vue-cli2.x简单的跨域请求demo（fetch、axios、proxyTable）
学习中需要应用到跨域请求的问题，找了资料，也自己写了一个简单的demo，应用到fetch方法或axios方法，前提都需要配置proxyTable，特别感谢：Web前端网站教程-米斯特吴老师提供的案例和请求接口。（一）安装vue-cli2.x脚手架如果还没安装的，或安装过程不熟的，可以参考这篇文章教程，写的很详细——Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）（二...
2019-10-15 08:15:47
309
原创 纯CSS写三角形-border法
(1)有边框的三角形我们来写下带边框的三角形。如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。这里就涉及到一个绝对定...
2019-10-08 08:51:28
124
原创 微信浏览器移动端禁止图片放大图片效果
解决第三方网页在微信浏览器中点击图片自动放大，因为微信Android客户端已经在底层支持img标签自动放大功能；传统方式：$(document).on(‘click’, ‘img’, e => {e.preventDefault();})这个方式可能会把所有的默认的属性都屏蔽了，典型的就是a标签不能跳转css方式：img{pointer-events: none;}这个会...
2019-09-26 17:35:10
1164
原创 出现两列省略号。。。显示,文本溢出超出行数 默认2行
<!DOCTYPE HTML><html><head><meta charset="utf-8"/><meta name="viewport" content="width=100%, initial-scale=1.0, user-scalable=no"/><meta content="telephone=no" na...
2019-09-26 17:33:27
206
原创 CSS3响应式布局--Media(媒体查询)
1.首先要了解一下什么是媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。2.如何在css中引入媒体查询...
2019-09-17 10:13:56
279
原创 Sass与Less
什么是Sass、LessSass和Less都属于Css预处理器，Css预处理器定义了一种新的语言，其基本思想是用一种专门的编程语言，为Css增加一些编程的特性，将Css作为目标生成文件，然后开发者使用这种语言进行Css编码工作(用一种专门的编程语言，进行Web网页样式设计，再通过编译器转化为正常的Css文件，以供项目使用)。为什么要使用Sass、Less因为css只是单纯的属性描述，它并不具...
2019-09-04 08:34:43
113
原创 Js apply方法详解,及其apply()方法的妙用
Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享… 如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高…主要我是要解决一下几个问题: apply和call的区别在哪里 什么...
2019-07-23 18:51:17
204
原创 JS数组reduce()方法详解及高级技巧
reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高…1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数，不包括...
2019-07-17 20:58:06
147
原创 js基础应用篇 - 放大镜
放大镜效果<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1....
2019-07-04 18:13:58
248
原创 js基础应用篇 - 豌豆射手
豌豆射手效果图，增加了可拖拽功能<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>豌豆射手</title> <style type="text/css"> *{ margin: ...
2019-07-04 18:03:39
369
原创 js基础应用篇 - 实现简单购物车(localStorage)
购物车，按图示进行页面布局，鼠标移到列表上时，列表下方会出现购物车按钮，点击“加入购物车”，会在列表下方出现添加的商品，刷新页面时，购买商品不丢失，点击“x”，该商品会被删除。
2019-07-04 17:40:25
2777
原创 js基础应用篇 - 正则验证
正则，按图示进行页面布局，按提示进行正则验证这个内容有些稍微变化 ，不是按照原图，比如最小/最大值，最小/最大长度，没有写；最后的提交按钮只做了提示处理，表单内容全部正确才可以点击提交没有设置
2019-07-04 17:36:02
519
原创 js属性节点的nodeValue值
属性节点的nodeValue值元素节点的 nodeValue 是 undefined 或 null文本节点的 nodeValue 是文本自身属性节点的 nodeValue 是属性的值li是一个元素节点，所以它的nodeValue是null 或undefined....
2019-07-04 17:08:29
2495
原创 js正则表达式验证大全
//判断输入内容是否为空function IsNull(){ var str = document.getElementById('str').value.trim(); if(str.length==0){ alert('对不起，文本框不能为空或者为空格!');//请将“文本框”改成你需要验证的属性名称! } } ...
2019-07-02 10:16:03
183
原创 JS基础_JSON
JSON简介和语法JOSNJS中的对象只有js自己认识，其他语言都不认识，JOSN 就是一个特殊格式的字符串，这个字符串可以被任意语言所识别，并且可以转换为任意语言的对象，josn在开发中主要用来数据的交互JavaScript Object Notation (JSON)：JavaScript对象表示法...
2019-06-28 16:52:43
107
原创 js 把一个函数赋给一个变量时带括号与不带括号的区别
js 把一个函数赋给一个变量时带括号与不带括号的区别function hi(){ var a = 1; return function(){ console.log(a++); }; }; var aaa = hi();var bbb = hi;aaa();aaa();bbb();这段代码中 aaa与bbb的区别是什么？aaa 是将...
2019-06-28 09:39:38
403
原创 深入理解JS闭包
深入理解JS闭包闭包(closure)是Javacript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。js code:var n = 999;function f1()...
2019-06-28 08:45:33
88
原创 DOM节点类型
节点类型我们页面里面的节点类型很多，比如元素节点、文本节点、注释节点、属性节点等等。我们可以通过nodeType属性来查看这个节点的类型是什么。而nodeType返回的是一些数字，下面介绍几个基础的类型和数字的对应关系：元素节点——1属性节点——2文本节点——3注释节点——8document——9DocumentFragment——11节点的其他属性• nodeName这...
2019-06-24 17:59:26
170
原创 JavaScript数组方法大全
JavaScript中创建数组有两种方式（一）使用 Array 构造函数：var arr1 = new Array(); //创建一个空数组var arr2 = new Array(20); // 创建一个包含20项的数组var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组（二）使用数组字面量表示法：var arr4...
2019-06-18 21:16:26
115
转载 JavaScript change 事件
change具有改变的意思，change事件会在元素数据发生变化的时候触发。下面需要解决两个问题：（1）.事件针对哪些元素有效。（2）.哪些方式改变数据会触发此事件。关于事件处理函数注册，可以参阅如何注册事件处理函数一章节。浏览器支持:（1）.IE浏览器支持此事件。（2）.edge浏览器支持此事件。（3）.火狐浏览器支持此事件。（4）.Opera浏览器支持此事件。（...
2019-06-17 13:45:30
26007
1
原创 JavaScript 基础篇（六）-函数/对象
JavaScript基础匿名函数匿名函数：没有名字的函数匿名函数如何使用：将匿名函数赋值给一个变量，这样就可以通过变量进行调用匿名函数自调用关于自执行函数（匿名函数自调用）的作用：防止全局变量污染。自调用函数匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用的方式来执行(function () { alert(123);})();函数是一种数据类型funct...
2019-06-15 10:43:33
165
原创 JavaScript 基础篇（五）-函数
JavaScript基础函数为什么要有函数如果要在多个地方求1-100之间所有数的和，应该怎么做？什么是函数把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用函数的作用就是封装一段代码，将来可以重复使用函数的定义函数声明function 函数名(){// 函数体}函数表达式var fn = functio...
2019-06-14 22:24:15
151
原创 JavaScript 基础篇（四）-数组
JavaScript基础数组为什么要学习数组之前学习的数据类型，只能存储一个值(比如：number/string。我们想存储班级中所有学生的姓名，此时该如何存储？数组的概念所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。数组的定义数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。通过数组字面量创建数...
2019-06-13 21:28:01
144
原创 JavaScript 基础篇(三)
一. 循环：从前有座山，山里有座庙，庙里有两个和尚，有一个大和尚对小和尚说（死循环）。。。。。问题：希望大家能够在页面上输入100个alert(“小追命直帅啊！”)?有没有一种方式能够让我们将这一百句话以最简单的方式书写出来。１ while循环：作用：反复执行一段代码：代码： while(判断条件/boolean){ 代码块}while循环的执行流程：当代码执行到while...
2019-06-12 20:03:49
129
原创 JavaScript 基础篇(二)
二. 数据类型的补充：1.string2.number有一种特殊的数据:NaN(not a number);NaN:是计算发生错误时的一种状态， 也是number类型的数据。判断是否是NaN的一个关键字:isNaN(is not a number):是非数字如果结果是NaN,，那么isNaN的结果是true,如果是一个正常的数字，isNaN返回的值是false;如果结果是一个字符串，那...
2019-06-12 09:14:13
278
原创 JS中二进制与十进制的相互转换
JS中二进制与十进制的相互转换十进制转换为二进制：var num = 100;console.log(num.toString(2));toString()方法可把一个 Number 对象转换为一个字符串，并返回结果。语法NumberObject.toString(radix);其中，radix为可选。规定表示数字的基数，使 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。...
2019-06-11 19:42:24
333
原创 JavaScript 调试常见报错以及原因
JavaScript 调试常见报错以及原因 在程序开发中难免会遇到一些错误，在成千上万的代码中去寻找错误很明显相当于大海捞针，为此，每种计算机编程语言都要它独特的一套错误处理与调试机制。当然，JavaScript也不例外。但是，接触过javascript的人都知道，在调试js的过程中有时候真想砸电脑。因为在调试的过程中，控制台给出的错误非常难以理解，其次给出的行号不总有帮助。虽然很多时候都要靠...
2019-06-11 19:38:19
286
原创 JS相等运算符(==)和等同运算符(===)
相等运算符()和等同运算符(=)===运算符是等同运算符，它采用严格的同一性定义检测两个运算数是否完全等同。==运算符是相等运算符，它采用比较宽松的同一性定义（即允许进行类型转换）检测两个运算数是否相等。下面的规则用于判定===运算符比较的两个值是否完全相等：1.如果两个值的类型不同，它们就不相同。2.如果两个值的类型是数字，而且值相同，那么除非其中一个或者两个都是NaN(这种情况它们不...
2019-06-10 21:55:10
176
原创 JavaScript 基础篇(一)
JavaScript简介１ JavaScript的用途JavaScript用来制作web页面交互效果，提升用户体验。简单列出几个JavaScript能够制作的页面效果，它能干什么：轮播图Tab栏（选项卡）地图表单验证web前端三层来说：w3c的规范：行内样式（淘汰）结构层 HTML 从语义的角度，描述页面结构样式层 CSS 从审美的角度，美化页面行为层 Java...
2019-06-10 21:53:47
161
原创 科学计数法e
一、基本运算个人理解：e就表示10数字很大的数，一般我们用科学记数法表示，例如6230000000000;我们可以用6.23×10^12表示，而它含义是什么呢？从直面上看是将数字6.23中6后面的小数点向右移去12位。若将6.23×10^12写成6.23E12，即代表将数字6.23中6后面的小数点向右移去12位，在记数中如3×104+4×104=7×10^4可以写成3E4+4E4=7E4...
2019-06-10 21:24:33
7131
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人