Javascript
关注
分享
扫一扫
文章平均质量分 59
凌晨独舞
这个作者很懒，什么都没留下…
展开
-
toUpperCase()和toLowerCase()
作用toUpperCase() 方法用于把字符串转换为大写。toLowerCase() 方法用于把字符串转换为小写。例子var txt="Hello World!"document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")document.write("<p>Uppercase:原创 2019-01-21 17:18:01 · 1235 阅读 · 0 评论 -
IOS input 光标大小调整
前言在项目中做移动端页面，发现IOS 的光标大小很大，和安卓的完全不一样，思考怎么调整大小，搜索之后发现，里面挺好玩的。觉得是可以总结一下的。结论IE：不管该行有没有文字，光标高度与font-size一致。 FF：该行有文字时，光标高度与font-size一致。该行无文字时，光标高度与input的height一致。 Chrome：该行无文字时，光标高度与line-height一致；该行有文字时，原创 2017-10-12 23:10:24 · 6221 阅读 · 0 评论 -
实时监听输入框的内容
前提以前做 input 输入框的时候，喜欢绑定 change 来监听内容的内容改变，但是这样有一个不好的地方，在于监听变化是在这个 input 失去焦点之后才能监听到， 怎样可以实时监听变化？解决document.getElementById("input").addEventListener('input',function(){ console.log(document.getEle原创 2017-09-11 14:28:34 · 769 阅读 · 0 评论 -
JS 传递的是函数 怎么带参数
问题一 ：function a(type){ alert(type);}setTimeout(a,3000)这里的 a 是函数，我怎么给a 传递参数解决一function a(type){ alert(type);}setTimeout(function(){ a('123')},3000) //多套一层函数，在函数里面赋值，调用函数解决二function原创 2017-09-11 14:10:14 · 7748 阅读 · 1 评论 -
sass 官网安装ruby出错
前言学习sass 时，查看sass(中文网 https://www.sass.hk/install/) 上面说 安装sass 必须先安装ruby。但是按照教程，无法安装成功。gem sources -a https://ruby.taobao.org/这一步出错 提示：Error fetching https://ruby.taobao.org/: SSL_connect r原创 2017-09-18 23:30:47 · 576 阅读 · 0 评论 -
ajax的替代方案，Fetch
前提项目改版用到了一个新东西叫Fetch。这个东西挺不错的，总结一下。 web发展能进入2.0时代，和ajax是分不开的。动态的获取数据，不刷新页面的方式非常的吸引人。现在我们有了fetch. 可以做和ajax一样的事情。就说明fetch一定是一个了不起的东西，虽然不清楚 他和 ajax相比 有哪些比较好的地方，但是所谓后来者居上，他一定有自己独特的好处，我现在刚刚接触，只能在用法上了解一些原创 2017-09-06 14:18:13 · 4817 阅读 · 0 评论 -
当 position:fixed 遇上 transform
前言任务是 iscroll.js 做滑动效果， 需要滑动到一定位置的时候 滑动里面的元素 停留在 窗口的最顶端，我想的是 检测一下当到位置是 把元素设置成 position:fixed 就可以了。但是事实是并没有，设置了属性还是照样 可以滑动，这让我很费解。原因iscroll.js 在外层的div 上设置了 transform ,而 这个元素影响了 position:fixed 让他只原创 2017-09-18 23:13:22 · 1215 阅读 · 0 评论 -
iOS下无法触发focus事件的问题
前提我的思路需要在点击事件之后，先让一个input元素失去焦点，再让另一个input 元素获取到焦点，代码如下： $('#xd_content .tabcontent .nav').on('click', function () { $('#xd_content ').blur(); setTimeout(function () { $(原创 2017-08-30 15:50:43 · 8344 阅读 · 2 评论 -
webview ios页面顶部提高的问题
前提在做页面的时候，用 webview 嵌入到页面中安卓状况很好，但是我们的ios 顶部提高了很多。和顶部提示栏重合在一起。效果：我以为是我使用了移动效果引起的。原来是ios端页面就是这样的。所以我就对ios端做了兼容 if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { document.getElementsByClass原创 2017-08-23 09:26:13 · 1362 阅读 · 0 评论 -
es6 编程风格
块级作用域（1）let 取代 varES6提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。'use strict';if (true) { let x = 'hello';}for (let i = 0; i < 10; i++) { console.log(i);}上面代码如果用var替代let，实际上就声明了转载 2017-09-04 17:57:28 · 7719 阅读 · 0 评论 -
es6 变量的解构赋值
什么是变量的解构赋值主题是赋值，解构是一种方式。从名字中我们就能知道这个是用来做赋值操作的，解构该怎么么理解？从数组和对象中提取值，对变量进行赋值， 看看下面的例子就明白了。数组的解构赋值基本用法let a = 1;let b = 2;let c = 3;可以写成：let [a, b, c] = [1, 2, 3]; 上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。本质上，这种写法属转载 2017-09-04 17:30:25 · 11477 阅读 · 0 评论 -
js promise
前提用webview 做app开发。中间遇到图片上传的问题，上传过程展示上传进度。原来的思路是for 循环，创建异步上传。但是在做的过程中发现，会出现上传展示会出现 1/20 一下子就到了 7/20 然后 15/20 最后完成的现象。我觉得可能是 浏览器会一次性执行好几个请求，导致速度不均衡。所以我希望可以让一个请求完成，在进行另一个请求。虽然有普通的方法可以实现这个过程。但是还是学到了一个新的方原创 2017-08-22 20:11:35 · 353 阅读 · 0 评论 -
图片上传：FileReader获取，Canvas压缩图片
直接上代码吧 var image = document.createElement("img"); image.file = file; var reader = new FileReader(); var ret = reader.readAsDataURL(file); reader.onload = (function(aImg){ return funct原创 2017-08-22 11:20:40 · 1023 阅读 · 0 评论 -
iframe 的事件传递
一、同域下父子页面的通信iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。父页面parent.html<html><head> <script type="text/javascript"> function say(){ alert("parent.html"); }转载 2017-08-06 11:13:02 · 6241 阅读 · 0 评论 -
解决tigger-iOS端失效的现象
前提有时候使用tigger 来触发点击实现，但是出现在iOS下不触发的现象。所以呢怎么解决？答案是 写两遍你的触发事件。。$('#file').tigger("click");$('#file').tigger("click");就OK了 ！！！原创 2017-08-06 11:04:02 · 1041 阅读 · 0 评论 -
iframe在ios滑动不顺畅
前提最近使用了iframe做页面，发现手机端页面的效果非常不好。iOS滑动不是非常的畅通在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:<div class="scroll-wrapper"> <iframe src=""></iframe> </div> .scroll-wrapper { -webkit-overflow-scrolling: to原创 2017-08-06 10:59:30 · 3233 阅读 · 1 评论 -
移动端position:fixed滑动问题
前提在任务中需要我在页面上使用position：fixed 和 overflow：scroll 这两个属性，结果在手机端出现头部也跟着滑动的现象。那么怎么来处理这个现象呢？解决办法分别把position：fixed 和 overflow：scroll 两个属性分开到两个box中。<div style=" overflow : scroll"> <div style="position:f原创 2017-08-06 10:52:00 · 5933 阅读 · 0 评论 -
JS模式之Constructor （构造器）模式
目的： 创建符合预期的对象创建对象的方法1. var object={};2. var object2 = new Object(); 给对象赋值的四种方法 // 1. 点赋值 object.pointMethod = "pointMethod"; console.log(object); //2. [] 赋值法 object["bracketMeth原创 2017-11-08 17:39:52 · 1611 阅读 · 0 评论 -
微信浏览器无法使用window.location.reload()刷新页面
解决微信浏览器无法使用window.location.reload()刷新页面 window.location.href=window.location.href+"?id="+10000*Math.random();我是过 window.location.href=window.location.href 也不能刷新 还是后面加一个时间戳比较保险吧原创 2017-11-09 14:29:18 · 3957 阅读 · 1 评论 -
isFinite()的使用
作用isFinite() 函数用于检查其参数是否是无穷大。如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false。例子document.write(isFinite(123)+ "<br>"); truedocument.write(isFinite(-1.23)+ "<br>"); truedocument.write(i...原创 2019-01-21 15:45:14 · 3786 阅读 · 0 评论 -
parseFloat的使用
作用parseFloat()函数 可解析一个字符串，并返回一个浮点数。例子<script>document.write(parseFloat("10") + "<br>"); 10document.write(parseFloat("10.33") + "<br>"); 10.33document.write(parseFlo原创 2019-01-21 15:41:10 · 5213 阅读 · 1 评论 -
Object.freeze的使用
定义Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。案例冻结对象var obj = { prop: function() {}, foo: 'bar'};// 新的属性会被添加, 已存在的属性可能// 会被修改...原创 2019-01-18 18:46:43 · 4808 阅读 · 0 评论 -
vue 编译报错 -- JavaScript heap out of memory
背景在使用vue时 由于项目过大，编译过程出现错误，截图大致如下 原因原因是 JavaScript堆内存不足，这里说的 JavaScript 其实就是 Node，我们都知道 Node 是基于V8引擎，在一般的后端开发语言中，在基本的内存使用上没有什么限制，但是我去查阅了相关的资料才发现，在 Node 中通过 JavaScript 使用内存时只能使用部分内存（64位系统下约为1.4 G...原创 2018-09-10 10:29:19 · 4706 阅读 · 1 评论 -
async await 的原理
前言在公司的项目中，我们经常用到async await 这样的函数，它的作用也很奇特，可以让异步的函数等待异步执行的结果出来再继续往下进行。我一直很好奇这是怎么做到的，它内部的机理是怎么样的，就一个关键词在函数前面加async，在异步操作前面加await就可以做到。他是怎么做到的呢？再抛出几个问题1 出处在哪里现在我们用的vue项目就会把我们的语法打包编辑成浏览器可以识别的...原创 2018-07-08 21:58:30 · 17960 阅读 · 1 评论 -
js事件循环
前言什么是事件循环，原来被人问到的时候就懵逼了，好像没有听过这个概念吗？ 不应该是事件捕获，事件冒泡这种吗？事件循环是什么鬼？什么是事件循环单线程一百度，原来真有事件循环这一概念，并且阮一峰大神的博客专门介绍了这一概念 。在此做一个简单的自己的总结首先js是单线程的。为什么设计成单线程也和自己的应用场景有很大关系，JS 被设计出来在浏览器端使用，如果多线程，一个线程说删掉...原创 2018-05-19 17:20:51 · 650 阅读 · 0 评论 -
js 中 map , foreach , reduce 的区别
每日一问：js中 map foreach 和 reduce的 区别答案从网上找的大神的回答总结： map 会返回新的数组 foreach 便利数组中每一项 reduce 适合做累计运算原创 2018-04-10 01:07:40 · 2234 阅读 · 2 评论 -
js中const,var,let区别
const 不可以修改 并且必须初始化const NAME；Uncaught SyntaxError: Missing initializer in const declarationconst NAME = 'marain'；NAME = 'marin2'Uncaught SyntaxError: Missing initializer in const declaration...原创 2018-03-13 12:04:31 · 523 阅读 · 0 评论 -
js 数组函数 和 注意事项
js 的数组对象有哪些push — 向数组的末尾添加一个或更多元素，并返回新的长度。pop — 删除并返回数组的最后一个元素shift — 删除并返回数组的第一个元素unshift —可向数组的开头添加一个或更多元素，并返回新的长度。slice — 从某个已有的数组返回选定的元素sort — 对数组的元素进行...原创 2018-03-13 11:57:58 · 662 阅读 · 0 评论 -
什么是XSS和CSRF攻击，怎么防护
什么是SXXXSS：跨站脚本（Cross-site scripting，通常简称为XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。CSRF:跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 ...转载 2018-03-19 11:06:47 · 3880 阅读 · 2 评论 -
object深复制与浅复制
问题由来Javascript中对一个对象赋值，会存在以下问题 var obj1 = { a: '1', b: '2', c:{ d:'3', e:'4' } } var obj2 = obj1; console.log(obj2.c.d ...原创 2018-03-11 11:15:03 · 593 阅读 · 0 评论 -
reflow（回流）和repaint（重绘）及其优化
什么是Repain 和 Reflow首先说明一下 浏览器解析过程 1、解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为 – 内容树。 2、构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树。 3、布局渲染树: 从根节点递归调用，计算...原创 2018-03-09 01:44:50 · 605 阅读 · 0 评论 -
前端知识点整理
一. HTML 部分 1. 声明概念(doctype html) 2. HTML5语义化 3. HTML5认知 4. SVG 5. Canvas 6. sessionStorage && localStorage二. CSS部分 1. 布局 2. 动画 3. 定位和浮动 4. Flex布局原创 2018-01-29 22:59:15 · 405 阅读 · 0 评论 -
H5调用本地摄像头拍摄照片
前言最近项目中需要H5调用本地摄像头拍照的需求。代码<canvas id="canvasCemara" width="500" height="500"></canvas><video autoplay="" id="video2" style="width:500px;height:500px;"></video><button id="btn">拍摄</button>html 部分就这些 一原创 2017-12-20 21:51:32 · 3520 阅读 · 2 评论 -
揭示模式（Revealing Module）
概念在模块模式的基础上，在返回的私有范围内，重新定义所有的 函数和变量。并返回一个匿名的对象。他拥有所有指向私有函数的指针。实例var myRevealingModule = function(){ var privateVar = "Ben ", publicVar = "hello word"; function privateFunction (){原创 2017-11-15 19:53:14 · 679 阅读 · 0 评论 -
Module （模块) 模式
概念module 模式 最初被用来定义一个类的私有和共有封装的办法。在JavaScript中还有降低函数命名冲突的作用。JS重没有私有共有的概念 不想PHP中定义类就 public 等方法但是可以通过 函数作用域 使用闭包 的概念来完成实例var mynamespace = (function(){ var myPrivateVar = 0; var myPublicVar = "f原创 2017-11-15 19:39:23 · 751 阅读 · 0 评论 -
图片先垫底图，加载出来以后替换真图的方法
<div class="content"> <div class="content_show"><img class="p0" data-imgtype="0621000400744002" data-share="" src="https://www.baidu.com/img/computer_pc_f9e71b7cee2d086842457387be642f5e.gif" al原创 2017-07-26 20:25:43 · 2148 阅读 · 0 评论 -
前端页面处理分辨率的方法
验证分辨路的方式 ! function (userAgent) { var screen_w = parseInt(window.screen.width), scale = screen_w / 1080; if (/Android (\d+\.\d+)/.test(userAgent)) {var version = parseFloat(RegExp.$1); docu原创 2017-07-26 00:02:53 · 3322 阅读 · 0 评论 -
swiper 轮播图插件
swiper 一个不错的轮播插件官网：http://www.swiper.com.cn/demo:1 . 引入swiper.css文件和swiper.js 文件 （或者依赖jQuery的swiper.jquery.min.js） 2. 写入相应的html.(这里面有volist是thinkPHP遍历用的，里面是展示的图片)<div class="swiper-container" style="height原创 2017-06-09 16:46:33 · 736 阅读 · 0 评论 -
滑动插件Iscroll
iscroll 难题 文档原创 2017-06-09 15:28:38 · 609 阅读 · 0 评论 -
javascript高级程序设计（第六章面向对象的程序设计）
没有类的概念 定义类的方式变化var person = new Object();person.name = "marain";person.age = 24;person.job="software engineer";person.sayName=function(){ alert(this.name)}//后来使用对象字面量var person= { name:"原创 2017-06-29 18:22:52 · 590 阅读 · 0 评论