- 博客(63)
- 收藏
- 关注
RSS订阅原创 前端小记
如何搭建个人博客：https://www.zhihu.com/question/20463581悬笔e绝的个人博客：http://www.xuanbiyijue.com/page/3/阮一峰的个人网站：http://www.ruanyifeng.com/home.html卡尔维诺中文站：http://www.ruanyifeng.com/calvino/廖雪峰：https://www.li...
2019-05-22 10:26:08
771
原创 eslint
// http://eslint.org/docs/user-guide/configuringmodule.exports = {root: true,parser: ‘babel-eslint’,//解析器，这里我们使用babel-eslintparserOptions: {sourceType: ‘module’//类型为module，因为代码使用了使用了ECMAScript模块...
2019-04-26 15:21:02
350
原创 native echarts 打包release tooltip formatter 中文被转化为Unicode的解决方法
打开node_modules->native-echarts->src->util->toStringsexport default function toString(obj) { let result = JSON.stringify(obj, function(key, val) { if (typeof val === 'function')...
2019-01-11 15:21:01
940
3
原创 createMaterialBottomTabNavigator
import React, {Component} from 'react';import {createStackNavigator, createMaterialTopTabNavigator, Header} from 'react-navigation';import {createMaterialBottomTabNavigator} from 'react-navigation...
2018-11-09 14:51:03
1290
原创 video.js播放rtmp
这段时间做一个web端视频实时监控功能，特此记录一下：h5新标签vedio不支持rtmp流,需要flash来播放，而谷歌浏览器如果没启用flash是无法播放的，所以检测一下在页面给一个提示，方便用户。为了兼容不同浏览器，IE只支持对Object的解析；火狐，谷歌，Safari只支持对Embed的解析。我这里只是借用了embed的样式和提示启用flash的功能。<script src...
2018-10-11 10:02:37
4272
1
原创 css实现高度等于宽度百分比的圆环
圆环容器设置：width:0,height:0,padding-bottom: "80%",padding-left:"80%",border:"3px solid red",borderRadius:"80%"效果如下：在圆环内显示文字：.ring { width: 0; height: 0; padding-bottom: 80%; padding-left...
2018-09-13 14:09:10
1232
1
原创 Unable to resolve module 'AccessibilityInfo', when trying to create release bundle
解决一个问题记录一下：react-native init AwesomeProjectcd AwesomeProjectreact-native run-androidnpm uninstall react-nativenpm install --save react-native@0.55.4react-native run-androidnpm install --save ...
2018-09-11 11:30:58
125
原创 h5监听任何 App 自带的返回键，以及安卓机里的物理返回键
var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;var visibilityChangeEvent = ...
2018-08-31 15:20:05
3536
原创 解决移动端软键盘压缩页面布局的问题
今天在做移动端的时候遇到，页面使用绝对定位或百分比，vh、vh来布局时软键盘压缩页面的问题，百度了几个方法，特此记录一下。套壳上架的话可以禁用横屏，避免视口改变触发事件1.判断window.onresize前后大小，间接判断软键盘弹出，在对页面布局做处理，如改变position或设置容易大小为定值var clientHeight = document.documentElement.cli...
2018-08-16 11:21:56
3223
原创 移动端使用谷歌浏览器来实时测试你的webapp
在做webap的时候，会遇到这个问题，利用谷歌自带的测试工具调好样式，部署到服务器后在手机上测试的时候会有误差，这时候如果能够在手机上实时预览效果的话简直棒极了1.USB 连接你的安卓手机，打开USB调试。确保USB连接正常2.电脑运行你的webapp，在开发者工具中打开 Remote devices 菜单。3.在左边选择 Settings ，点击 Add Rule 输入端口号...
2018-08-14 15:06:03
1708
原创 消除click在移动浏览器上300毫秒的延迟
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoad...
2018-08-01 15:44:52
604
原创 移动端Web页面设置理想视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。其中：width=devi...
2018-08-01 15:42:55
1058
原创 github访问和提交很慢
如果github访问和提交很慢的话，替换一下下面这个文件。路径：C:\Windows\System32\drivers\etchttp://ows30zge8.bkt.clouddn.com/hosts
2018-07-30 14:43:04
836
原创 移动端左右滑动
// 滑动 var touch = new Touch(document.getElementsByTagName("body"),80).init(); //向左滑动触发事件 var powerOrIncome =this.state.detailsType; let that =this;...
2018-07-17 10:33:11
882
原创 canvas水球动画
toBalling = () => { // 水球 let canvas = this.refs.c; let ctx = canvas.getContext("2d"); let waterBallValue = this.state.waterBallValue;//水球上显示的数值 let M = ...
2018-04-09 10:48:33
930
原创 Browsersync省时的浏览器同步测试工具
请想象这样一个场面：你开着两个显示器，一边是IDE里的代码，另一边是浏览器里的你正在开发的应用。此时桌上还放着你的手机，手机里也是这个开发中的应用。然后，你新写了一小段代码，按下了ctrl+s保存。紧接着，你的手机和另一个显示器里的应用，就变成了更新后的效果。你可以马上检查效果是否和你预想的一致，甚至都不需要动一下鼠标...想起来还不错？嗯，这只是简单地省略掉那个开发过程中会按好多遍的F5刷新。自...
2018-03-29 12:34:54
434
原创 关于input type设置password出现黄色背景和默认内容
只要设置了type为password就会出现黄色的背景和默认的内容。点击password框会出现使用以下项的密码,有没有觉得很丑，这是谷歌浏览器默认的行为，input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus { box-shadow:0 0 0 60px white inset;...
2018-03-15 14:04:39
2937
原创 webstorm 打开项目"java.io.IOEXception:couldn't create PTY"
今天打开webstorm突然跳出这个问题，百思不得其姐，赶紧问了一波谷歌首先先说下这个错误的起因，无法创建PTY，其实就是无法打开相应的命令行，到 File -> Settings -> Tools -> Terminal改下shell path的路径：改为C:\Program Files\Git\bin\sh.exe然后关掉重启下，还不行重启下电脑就好了原来使用cmd运行程序，...
2018-03-13 15:30:32
2109
1
原创 JavaScript（三）
对DOM的扩展主要分两个方面* 选择器扩展* HTML5扩展此外还有一些例如元素遍历规范和浏览器专有扩展选择器APIquerySelector()该方法的参数为css选择符，返回与该方法匹配的第一个元素，如果 没有找到则返回null. var div01=document.querySelector('#div01'); console.log(div01.innerHTML);如果通过节...
2018-03-12 17:47:41
251
原创 JavaScript（二）
NODEnode类型(12种) console.log(ele.nodeType)； //1-element //2-attribute //3-textnodeName如果节点类型为1，则该节点有tagName属性。 var ele=document.getElementsByTagName('div')[0]...
2018-03-12 17:46:52
159
原创 JavaScript（一）
async <script src="..." asynv></script> // 异步加载、解析文件。但是会在页面load加载之前执行， //但会在DOMContentLoaded之前或者之后执行文档模式文档模式通过doctype参数设置，模式分为混杂模式和标准模式，后来又提出准标准模式。 准标准模式分为过度（transitional）模式和框架集(framese...
2018-03-12 17:46:13
223
原创 事件驱动与事件处理
基本概述JS是采用事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候， 会产生一个事件，该事件会驱动某些函数来处理。PS：这种方式和Java GUI中的事件监听机制很像，都是需要注册监听，然后再处理监听，只不 过实现的方式不同而已。事件源：产生事件的地方(html元素)事件：点击/鼠标操作/键盘操作等等事件对象：当某个事件发生时，可能会产生一个事件对象，该时间对象会封装...
2018-03-12 17:43:37
674
原创 JavaScript对象层次
什么是js我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]window 是 BOM 对象，而非 js 对象；BOM要...
2018-03-12 17:42:52
2267
原创 JavaScript继承
原型（prototype）实现继承rototype 即为原型，每一个对象 ( 由 function 定义出来 ) 都有一个默认的原型属性，该属性是个对象类型。 并且该默认属性用来实现链的向上攀查。意思就是说，如果某个对象的属性不存在，那么将通过prototype属性所属对象来查找这个属性。如果 prototype 查找不到呢？ js会自动地找prototype的prototype属性所属对象来查找...
2018-03-12 17:42:01
128
原创 面向对象基础
面向对象术语对象ECMA-262 把对象（object）定义为“属性的无序集合，每个属性存放一个原始值、对象或函数”。严格来说，这意味着对象是无特定顺序的值的数组。 尽管 ECMAScript 如此定义对象，但它更通用的定义是基于代码的名词（人、地点或事物）的表示。类每个对象都由类定义，可以把类看做对象的配方。类不仅要定义对象的接口（interface）（开发者访问的属性和方法），还要定义对象的内...
2018-03-12 17:40:55
138
原创 数组的排序
反转数组reverse()var arr=[1,3,6,8,10,3,4,9];var narr=arr.reverse();console.log(narr);排序sort()sort()方法按照升序，sort()原理，调用每个数组元素toString()方法。所以排序字符串数组没有问题，但是， var arr=[1,3,68,8,10,3,4,9]; var narr=ar...
2018-03-12 17:40:17
175
原创 数组的遍历
数组位置 //从头遍历元素在数组中的位置，如果没有找到则返回-1 var arr=['hao','hi','hello','nihao','nice']; var str=arr.indexOf('nihao'); console.log(str); //3 //从末尾遍历元素在数组中的位置，如果没有找到则返回-1 var arr=['hao','...
2018-03-12 17:38:46
452
原创 数组的操作（二）
检测数组判断变量是否为数组类型 var arr=[3,4,5]; console.log(arr instanceof Array); //true console.log(arr.constructor===Array); //true console.log(typeof arr);//结果为object,不能说明问题数组转换方法数组转换为...
2018-03-12 17:38:08
170
原创 数组的操作（一）
遍历数组 var arr=[1,3,5,7,9]; for(var i=0;i<arr.length;i++){ console.log(arr[i]); } console.log('------------------'); for(var v in arr){ console.log(arr[v]); } console.log('-----...
2018-03-12 17:37:29
150
原创 函数的作用域
作用域：它是指对某一变量和方法具有访问权限的代码空间, 在JS中, 作用域是在函数中维护的。表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。Javascript的作用域只有两种：全局作用域和本地作用域，本地作用域是按照函数来区分的。1.全局变量：声明在函数外部的变量（所有没有var直接赋值的变量都属于全局变量）// 声明全局变量var a;console.lo...
2018-03-12 17:36:44
258
原创 函数的返回类型
1.undefinedfunction add(a,b){ console.log(a+b);}var num=add(3,5);console.log(num);console.log(num);输出undefined 因为函数中没有return 语句2.值类型function add(a,b){ return a+b;}var num=add(3,5);conso...
2018-03-12 17:36:03
1771
原创 函数的定义
函数的构成关键字 function函数名函数体 function 函数名(){ //函数体 }函数常用定义方式方式一： function func(s){ console.log('hello'+s); }方式二： var func=function(s){ console.log('hello'+s); }方式二有称为函数字面量，赋值符号右面为匿名函数，...
2018-03-12 17:35:19
198
原创 函数的功能
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。function myFunction(){ alert("Hello World!");}###函数定义javaScript 对大小写敏感。关键词 function 必须是小写的.函数名建议采用驼峰法命名，并且必须以与函数名称相同的大小写来调用函数。调用函数的方式，myFunction() 后面的括号不能省略。 function ...
2018-03-12 17:34:43
1937
原创 异常处理
在JavaScript可以使用try...catch来进行异常处理。js出错也不提示错误（防止浏览器右下角有个黄色的三角符号，要不用户体验不好）在未申明或初始化的情况下使用变量 alert(e);//系统报错,下面语句不执行 alert('hello');改进 try{ alert(e); //其他语句 }catch(e) { alert(e.message);...
2018-03-12 17:33:29
142
原创 循环综合案例
素数质数（prime number）又称素数，有无限个。质数定义为在大于1的自然数中，除了1和它本身以外不再有其他因数的数称为质数。找出1-100之间的所有素数 var flag; for(var i=2;i<=100;i++){ flag=false; for(var j=2;j<=parseInt(i/2);j++){ if(i%j==0){...
2018-03-12 17:32:48
173
原创 跳转语句
break 语句用于跳出循环。 continue 用于跳过循环中的一个迭代。也就是跳过本次循环，执行下一次循环continue输出1-100之间的偶数 for(var i=0;i<=100;i++){ if(i%2==1){ continue; } console.log(i); }break如果以上案例用break会是什么结果呢？ for(var i=0;i<=...
2018-03-12 17:31:15
384
原创 for语句
##for 语句 如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。例如var cars=['路虎','捷豹','宾利','道奇','东风','比亚迪']document.write(cars[0] + "<br>");document.write(cars[1] + "<br>");document.write(cars[2] + "...
2018-03-12 17:30:32
1498
原创 switch语句
##switch 语句 switch 语句用于基于不同的条件来执行不同的动作。先看语法结构switch (fruit) {case "banana": // ... break;case "apple": // ... break;default: // ...}上面代码根据变量fruit的值，选择执行相应的case。如果所有case都不符合，则执...
2018-03-12 17:29:53
167
原创 条件语句
##if...else语句 又叫条件语句，用于基于不同的条件来执行不同的动作。该语句一定与boolean类型关联。通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。在 JavaScript 中，我们可使用以下条件语句：if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码if...else 语句 - 当条件为 true 时执行代码，当条件...
2018-03-12 17:29:15
145
原创 条件运算符
##条件运算符 在javascript中，条件运算符应该算是ECMAScript中最灵活的一种操作符，也是唯一的一个三元运算符，（一元、二元有哪些？）而且它遵循与其他语言中的条件运算符相同的语法形式。例子：variable = boolean_expression ? true_value : false_value;本质上，这行代码的含义就是基于对boolean_expression求值的结果...
2018-03-12 17:28:32
833
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人