JS
关注
分享
扫一扫
yakelande
这个作者很懒，什么都没留下…
展开
-
关于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 · 2975 阅读 · 0 评论 -
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 · 958 阅读 · 0 评论 -
JavaScript（三）
对DOM的扩展主要分两个方面* 选择器扩展* HTML5扩展此外还有一些例如元素遍历规范和浏览器专有扩展选择器APIquerySelector()该方法的参数为css选择符，返回与该方法匹配的第一个元素，如果 没有找到则返回null. var div01=document.querySelector('#div01'); console.log(div01.innerHTML);如果通过节...原创 2018-03-12 17:47:41 · 265 阅读 · 0 评论 -
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 · 175 阅读 · 0 评论 -
JavaScript（一）
async <script src="..." asynv></script> // 异步加载、解析文件。但是会在页面load加载之前执行， //但会在DOMContentLoaded之前或者之后执行文档模式文档模式通过doctype参数设置，模式分为混杂模式和标准模式，后来又提出准标准模式。 准标准模式分为过度（transitional）模式和框架集(framese...原创 2018-03-12 17:46:13 · 234 阅读 · 0 评论 -
事件驱动与事件处理
基本概述JS是采用事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候， 会产生一个事件，该事件会驱动某些函数来处理。PS：这种方式和Java GUI中的事件监听机制很像，都是需要注册监听，然后再处理监听，只不 过实现的方式不同而已。事件源：产生事件的地方(html元素)事件：点击/鼠标操作/键盘操作等等事件对象：当某个事件发生时，可能会产生一个事件对象，该时间对象会封装...原创 2018-03-12 17:43:37 · 693 阅读 · 0 评论 -
JavaScript对象层次
什么是js我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]window 是 BOM 对象，而非 js 对象；BOM要...原创 2018-03-12 17:42:52 · 2301 阅读 · 0 评论 -
JavaScript继承
原型（prototype）实现继承rototype 即为原型，每一个对象 ( 由 function 定义出来 ) 都有一个默认的原型属性，该属性是个对象类型。 并且该默认属性用来实现链的向上攀查。意思就是说，如果某个对象的属性不存在，那么将通过prototype属性所属对象来查找这个属性。如果 prototype 查找不到呢？ js会自动地找prototype的prototype属性所属对象来查找...原创 2018-03-12 17:42:01 · 140 阅读 · 0 评论 -
面向对象基础
面向对象术语对象ECMA-262 把对象（object）定义为“属性的无序集合，每个属性存放一个原始值、对象或函数”。严格来说，这意味着对象是无特定顺序的值的数组。 尽管 ECMAScript 如此定义对象，但它更通用的定义是基于代码的名词（人、地点或事物）的表示。类每个对象都由类定义，可以把类看做对象的配方。类不仅要定义对象的接口（interface）（开发者访问的属性和方法），还要定义对象的内...原创 2018-03-12 17:40:55 · 143 阅读 · 0 评论 -
移动端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 · 1073 阅读 · 0 评论 -
消除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 · 623 阅读 · 0 评论 -
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 · 392 阅读 · 0 评论 -
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 · 990 阅读 · 3 评论 -
video.js播放rtmp
这段时间做一个web端视频实时监控功能，特此记录一下：h5新标签vedio不支持rtmp流,需要flash来播放，而谷歌浏览器如果没启用flash是无法播放的，所以检测一下在页面给一个提示，方便用户。为了兼容不同浏览器，IE只支持对Object的解析；火狐，谷歌，Safari只支持对Embed的解析。我这里只是借用了embed的样式和提示启用flash的功能。<script src...原创 2018-10-11 10:02:37 · 4297 阅读 · 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 · 144 阅读 · 0 评论 -
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 · 3564 阅读 · 0 评论 -
解决移动端软键盘压缩页面布局的问题
今天在做移动端的时候遇到，页面使用绝对定位或百分比，vh、vh来布局时软键盘压缩页面的问题，百度了几个方法，特此记录一下。套壳上架的话可以禁用横屏，避免视口改变触发事件1.判断window.onresize前后大小，间接判断软键盘弹出，在对页面布局做处理，如改变position或设置容易大小为定值var clientHeight = document.documentElement.cli...原创 2018-08-16 11:21:56 · 3271 阅读 · 0 评论 -
移动端使用谷歌浏览器来实时测试你的webapp
在做webap的时候，会遇到这个问题，利用谷歌自带的测试工具调好样式，部署到服务器后在手机上测试的时候会有误差，这时候如果能够在手机上实时预览效果的话简直棒极了1.USB 连接你的安卓手机，打开USB调试。确保USB连接正常2.电脑运行你的webapp，在开发者工具中打开 Remote devices 菜单。3.在左边选择 Settings ，点击 Add Rule 输入端口号...原创 2018-08-14 15:06:03 · 1776 阅读 · 0 评论 -
数组的排序
反转数组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 · 202 阅读 · 0 评论 -
数组的遍历
数组位置 //从头遍历元素在数组中的位置，如果没有找到则返回-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 · 461 阅读 · 0 评论 -
switch语句
##switch 语句 switch 语句用于基于不同的条件来执行不同的动作。先看语法结构switch (fruit) {case "banana": // ... break;case "apple": // ... break;default: // ...}上面代码根据变量fruit的值，选择执行相应的case。如果所有case都不符合，则执...原创 2018-03-12 17:29:53 · 182 阅读 · 0 评论 -
条件语句
##if...else语句 又叫条件语句，用于基于不同的条件来执行不同的动作。该语句一定与boolean类型关联。通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。在 JavaScript 中，我们可使用以下条件语句：if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码if...else 语句 - 当条件为 true 时执行代码，当条件...原创 2018-03-12 17:29:15 · 158 阅读 · 0 评论 -
条件运算符
##条件运算符 在javascript中，条件运算符应该算是ECMAScript中最灵活的一种操作符，也是唯一的一个三元运算符，（一元、二元有哪些？）而且它遵循与其他语言中的条件运算符相同的语法形式。例子：variable = boolean_expression ? true_value : false_value;本质上，这行代码的含义就是基于对boolean_expression求值的结果...原创 2018-03-12 17:28:32 · 857 阅读 · 0 评论 -
AJAX
什么是AJAXajax 即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）， 也就是无刷新数据读取。http 请求首先需要了解 http 请求的方法（GET 和 POST）。GET 用于获取数据。GET 是在 URL 中传递数据，它的安全性低，容量低。POST 用于上传数据。POST 安全性一般，容量几乎无限。ajax 请求ajax 请求...原创 2018-03-12 16:49:34 · 153 阅读 · 0 评论 -
javascript DOM操作
1. 节点基础节点类型元素节点 Node.ELEMENT_NODE(1)属性节点 Node.ATTRIBUTE_NODE(2)文本节点 Node.TEXT_NODE(3)节点属性nodeTypenodeType 属性返回以数字值返回指定节点的节点类型。nodeNamenodeValue nodeNamenodeValuenodeType元素节点元素名null1属性节点属性名称属性...原创 2018-03-12 16:42:07 · 256 阅读 · 0 评论 -
bower 教程
介绍Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具，如YeoMan和Grunt，这个会在以后的文章中介绍。安装node环境:node.js安装Git，bower从远程git仓库获取代码包安装bower npm install -g bower使用查看bower 帮助 ...原创 2018-03-12 16:38:37 · 390 阅读 · 0 评论 -
跨域和上传文件
1. 跨域服务器方式一app.all('*',function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Acce...原创 2018-03-12 16:36:36 · 3864 阅读 · 0 评论 -
JS性能优化技巧
脚本应该放在页面元素代码之后无论当前 JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或JavaScript的命名空间，它们会对后面页面内容造成影响。避免全局查找 function search() { ...原创 2018-03-12 16:28:28 · 581 阅读 · 0 评论 -
for语句
##for 语句 如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。例如var cars=['路虎','捷豹','宾利','道奇','东风','比亚迪']document.write(cars[0] + "<br>");document.write(cars[1] + "<br>");document.write(cars[2] + "...原创 2018-03-12 17:30:32 · 1529 阅读 · 0 评论 -
跳转语句
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 · 396 阅读 · 0 评论 -
数组的操作（二）
检测数组判断变量是否为数组类型 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 · 179 阅读 · 0 评论 -
数组的操作（一）
遍历数组 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 · 162 阅读 · 0 评论 -
函数的作用域
作用域：它是指对某一变量和方法具有访问权限的代码空间, 在JS中, 作用域是在函数中维护的。表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。Javascript的作用域只有两种：全局作用域和本地作用域，本地作用域是按照函数来区分的。1.全局变量：声明在函数外部的变量（所有没有var直接赋值的变量都属于全局变量）// 声明全局变量var a;console.lo...原创 2018-03-12 17:36:44 · 273 阅读 · 0 评论 -
函数的返回类型
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 · 1792 阅读 · 0 评论 -
函数的定义
函数的构成关键字 function函数名函数体 function 函数名(){ //函数体 }函数常用定义方式方式一： function func(s){ console.log('hello'+s); }方式二： var func=function(s){ console.log('hello'+s); }方式二有称为函数字面量，赋值符号右面为匿名函数，...原创 2018-03-12 17:35:19 · 210 阅读 · 0 评论 -
函数的功能
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。function myFunction(){ alert("Hello World!");}###函数定义javaScript 对大小写敏感。关键词 function 必须是小写的.函数名建议采用驼峰法命名，并且必须以与函数名称相同的大小写来调用函数。调用函数的方式，myFunction() 后面的括号不能省略。 function ...原创 2018-03-12 17:34:43 · 1960 阅读 · 0 评论 -
异常处理
在JavaScript可以使用try...catch来进行异常处理。js出错也不提示错误（防止浏览器右下角有个黄色的三角符号，要不用户体验不好）在未申明或初始化的情况下使用变量 alert(e);//系统报错,下面语句不执行 alert('hello');改进 try{ alert(e); //其他语句 }catch(e) { alert(e.message);...原创 2018-03-12 17:33:29 · 149 阅读 · 0 评论 -
循环综合案例
素数质数（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 · 183 阅读 · 0 评论 -
前端小记
如何搭建个人博客：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 · 844 阅读 · 0 评论