Gkuankuan-CSDN博客

转载如何优雅的取随机字符串

13位Math.random.toString(16).substring(2);11位Math.random.toString(36).substring(2);

2018-06-04 10:27:14 1198

原创 js 通过blob实现下载文件

知识点：Blob，window.URL.createObjectURL<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head>&l

2018-04-12 15:00:43 27674

原创 js实现复制文本

1、通过clipboard.js，这里就不详细讲述。详情看这里点击打开链接2、原生方法：document.execCommand()；贴个demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</ti

2018-03-07 09:34:29 639

原创 this 六种不同值

普通函数调用，this为全局对象或是undefined作为对象的方法，this为那个对象new 表达式，this为以该函数为原型的新创建的对象使用 apply/call指定 this用bind绑定固定的this事件处理函数中的this是当前的触发事件的DOM元素(event.currentTarget)

2018-02-07 16:34:05 221

原创 requestAnimationFrame

window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。例: requestAnimationFrame * { margin: 0;

2018-02-05 11:57:21 616

原创 Last-Modified

在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是客户端请求的资源，同时有一个Last-Modified的属性标记此文件在服务器端最后被修改的时间。Last-Modified格式类似这样：Last-Modified : Fri , 12 May 2006 18:53:33 GMT客户端第二次请求此URL时，根据HTTP协议的规定，浏览器会向服

2018-01-29 14:03:51 448

原创 Vue声明周期钩子

beforeCreate 组件实例刚被创建，组件属性计算之前，如data属性等created 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在breforeMount 模板编译挂在之前mounted 模板编译挂在之后brforeUpdate 组件更新之前updated 组件更新之后beforeDestory 组件销毁前调用

2018-01-25 13:57:11 274

原创 scrollIntoView

让当前的元素滚动到浏览器窗口的可视区域内element.scrollIntoView(Boolean); Boolean = true 滚动到element的顶部Boolean=false 滚动到element的底部

2018-01-22 11:14:34 562

转载 iframe及postMessage使用解析

这篇主要讲iframe标签，对于frameset、frame、noframe标签就不讲了，因为在h5中已经不支持了。一、iframe标签介绍：标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。二、iframe标签兼容：iframe src="page_two.html" name="iframe"

2018-01-17 10:35:24 7954 1

console.log("%c%c发光字体", "line-height:28px;", "line-height:28px;padding:4px 0px;color:#fff;font-size:12px;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,#ff22ff),color-stop(1,

2018-01-17 10:32:35 363

原创获取光标位置

let oTextarea = document.querySelector("textarea"); oTextarea.addEventListener("mousedown",function() { _this.start = oTextarea.selectionStart;

2018-01-05 14:15:21 929

原创为文本添加省略动画

.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026"; /* ascii code for the ellip

2017-12-11 14:44:18 303

原创为图片添加好看的阴影边框

左图为有边框右图为无边框：添加如下样式img { background:#000; border:1px solid #fff; border-width:5px 5px 5px 5px; box-shadow:1px 1px 5px #333; -webkit-box-shadow:1px 1px 5px #333; -moz-box-sh

2017-12-11 14:06:57 5449 1

原创 Object方法

Object.assign({},obj) 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象Object.keys(obj) 返回一个由一个给定对象的自身可枚举属性组成的数组Object.create(animal.prototype) 方法会使用指定的原型对象及其属性去创建一个新的对象。Object.defineProperty(obj,prop,des

2017-11-22 10:36:08 285

原创 offset、client、scroll：width、height、left、top

offsetWidth 返回一个元素的布局宽度。offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。clientWidth 表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。scrollWidth 元素的s

2017-11-20 17:02:37 242

原创 vim常用命令

命令历史以：和／开头的命令都有历史记录，可以首先键入：或／然后按上下箭头来选择某个历史命令启动vim 在命令窗口中输入以下命令即可。vim直接启动vim。 vim filename打开vim并创建名为filename 的文件vim常用命令i 进入插入模式esc 正常模式u 撤销U 撤销对整行的操作v进入可视模式用jklh选择字符y 复制：wq 保存并退出zz 保存并退出：q！忽略更

2017-11-14 17:12:26 181

原创 npm login报错

使用npm login报错npm WARN adduser You can reset your account by visiting:npm WARN adduser npm WARN adduser https://npmjs.org/forgotnpm WARN adduser npm ERR! Darwin 15.4.0npm ERR! argv "/Users/GXZ/

2017-11-13 17:00:37 6967 1

原创数组常用方法汇总

Array.length返回或设置一个数组中的元素个数设置 length 属性的值来截断任何数组Array.from() :对伪数组或可迭代对象(包括arguments Array,Map,Set,String…)转换成数组对象语法 Array.from(arrayLike, mapFn, thisArg)arrayLike 想要转换成数组的伪数组对象或可迭代对象。mapFn (可选参数

2017-11-07 17:21:14 39221 6

原创 html代码换行引起的空格

不换行设置父级font-size为 0设置换行的标签否定边距margin-left;选用浮动属性float利用注释排版 使用返回标签

2017-11-05 12:55:08 1460

原创 css3实现四个方向三角

以上代码是用css属性实现的三角 .box { width: 0px; height: 0px; overflow: hidden; border-width: 10px; border-color: transparent transparent red tra

2017-11-04 21:48:43 956

转载欢迎使用CSDN-markdown编辑器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2017-11-04 21:12:48 137

原创 git常用提交命令

git init //初始化gitgit add ./filename //提交到版本库放入暂存git commit -m "备注" //提交到版本库git remote add origin http://github.com/youname/repo.git //关联远端仓库git push -u origin master //提交到远端仓库第一次以后用：git push ori

2017-11-04 16:02:08 4841

转载 HTTP Content-Type

在HTTP 1.1规范中，HTTP请求方式有OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT。通常我们用的只有GET、POST，然而对于Restful API规范来说，请求资源要用PUT方法，删除资源要用DELETE方法Content-Type 1.text/html2.text/plain3.text/css4.text/javascript

2017-11-04 14:53:29 324

转载 Rem布局原理

Rem布局原理rem布局的本质是什么？这是我问过很多人的一个问题，但得到的回答都差强人意。其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，那该多么美好啊假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比p {width: 50x} /* 屏幕宽度的50% */如果想要页面元素随着

2017-11-04 13:59:02 604

转载正则

正则表达式对于我来说一直像黑暗魔法一样的存在。手机正则去网上搜，邮箱正则去网上搜，复杂点的看看文档拼凑一下，再复杂只能厚着脸皮让其他同事给写一个。从来没有系统的学习过，今天准备拿下它。1. 学习目标：了解正则表达式语法在IDE中使用正则表达式在javascript 中使用正则表达式处理字符串2. 什么是正则表达式正则表达式，又称正规表示式、正规表示法、正规表达式、规则表达式

2017-11-04 13:03:44 414

转载 http请求常见状态码说明

1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码。代码说明100 （继续）请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。101 （切换协议）请求者已要求服务器切换协议，服务器已确认并准备切换。2xx （成功）表示成功处理了请求的状态代码。代码说明200 （成功）服务器已成功处理了请求。通常，这表示服

2017-11-04 13:01:24 296

原创 ajax载入与浏览器历史的前进与后退

ajax载入与浏览器历史的前进与后退使用到的知识点：popstatehistory.pushStatehistory.replaceStateAjax可以实现页面的无刷新操作——优点；但是，也会造成另外的问题，无法前进与后退!（前进后退无法重现上一次操作）；通过以下代码保存每次请求的参数即可实现浏览器后退操作；<script> var num = 0; var str

2017-11-04 12:43:24 253

原创 css实现文字渐变

字体颜色渐变字体颜色渐变这里有几个知识点：1.content属性的值除了使用文本之外，还可以直接访问读取标签的一些属性值。使用的方法是： attr();2. -webkit-mask 主要是用来给一个元素添加一个蒙版。蒙版可以是透明的png图片也可以是CSS3的渐变效果。字体颜色渐变字体颜色渐变 h1,.beauty-font

2017-11-04 10:31:16 9119

原创 vue filters过滤器使用

Document {{name | addName}} var vm = new Vue({ el: "#app", data:{ name:"123" },

2017-09-05 09:49:53 458

大G的博客