- 博客(44)
- 资源 (9)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 url参数解析与拼接
1.参数解析// 返回url的参数对象export function getUrlParseQuery (url) { if (url) { // 字符串截取 url = url.substr(url.indexOf('?') + 1) } // 创建一个对象，用于存name，和value const result = {} // location.search设置或返回从问号 (?) 开始的 URL（查询部分） const queryString = url |
2020-08-29 17:57:02
970
原创 vue实现页面间的跳转动画
1、监听路由变化2种方式监听页面切换// 方式1（引入第三方库vue-navigation）this.$navigation.on('forward', (to, from) => { // 动画类 this.transitionName = 'slide-left'})this.$navigation.on('back', (to, from) => { this.transitionName = 'slide-right'})// 方式2（路由对象route上加
2020-08-29 12:03:12
937
原创 web端实现图片下载
1、需求场景很多时候，前端需要将二维码和背景图片组合，然后生成一张海报，供用户下载分享2、功能实现使用canvas绘制海报调用canvas的toDataURL()方法，生成base64编码上传到图片服务器（移动端直接下载base64会报错）实现下载 // 使用a标签方式下载 const dlLink = document.createElement('a') dlLink.download = 'fileName' // 图片的url后面，必须加上后缀，否则会直接打开图片，不是下载图
2020-08-28 10:50:59
968
转载 JavaScript UTC时间转换
UTC：协调世界时，又称世界统一时间、世界标准时间、国际协调时间。格林尼治标准时（GMT）格林尼治标准时间（Greenwich Mean Time，GMT）是指位于伦敦郊区的皇家格林尼治天文台的标准时间，因为本初子午线被定义在通过那里的经线。 理论上来说，格林尼治标准时间的正午是指当太阳横穿格林尼治子午线时的时间。由于地球在它的椭圆轨道里的运动速度不均匀，这个时刻可能和实际的太阳时相差16分...
2019-05-17 14:48:48
3457
原创 ionic锚点定位
用到的主要方法：var location = $location.hash('id');//$location是angularjs的内置服务$ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll("#"+location);主要代码//html:<ion-view title="Welcome"> ...
2018-03-15 09:54:38
1854
2
转载 textarea实现高度自适应
文本框textarea根据输入内容自适应高度 javascript代码/** * 文本框根据输入内容自适应高度 * @param {HTMLElement} 输入框元素 * @param {Number} 设置光标与输入框保持的距离(默认0) * @param
2018-03-05 14:07:45
298
转载 JS判断ios系统的版本号
<html> <meta charset="UTF-8"/><body><script type="text/javascript"> var str= navigator.userAgent.toLowerCase(); var ver=str.match(/cpu iphone os (.*?) like mac os/); if(!ver){
2017-12-22 18:30:24
9510
转载 Ubuntu 16.04 64位 搭建 Node.js 环境
node 和 npm 的安装下载nodejs解压下载的文件node-v8.9.3-linux-x64.tar.xz 移到通用的软件安装目录 /opt/ sudo mv node-v8.9.3-linux-x64 /opt/安装 npm 和 node 命令到系统命令 sudo ln -s /opt/node-v8.9.3-linux-x64/bin/node /usr/local/bin/
2017-12-19 20:13:32
1123
转载 vuejs国际化插件vuex-i18n
vuex-i18nWe are big fans of the awesome vue, vuex and vue-router libraries and were just looking for an easy to use internationalization plugin, employing as much of the “standard library” as possible.
2017-12-15 14:33:52
2116
转载 svg animate实现加载中的动画
<svg viewBox="0 0 64 64" style="width: 40px; height: 40px"> <g stroke-width="0"> <circle cx="24" cy="0" transform="translate(32,32)" r="7.48463"> <animate attributeName="r" dur=
2017-12-12 10:15:27
1298
原创 使用css美化单选框（radio）和复选框（checkbox）的样式
//html<label> <input name="checkbox" class="checkbox" type="checkbox"/> <s></s><span>天空</span></label><label> <input name="checkbox" class="checkbox" type="checkbox"/> <s></s><span>大
2017-11-16 17:21:51
4331
转载 解决 div或者a标签的高度比里面的img高度多了5px 问题
a元素或者div元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或font-s
2017-09-27 18:07:42
1365
转载 一张图理解prototype、proto和constructor的三角关系
前面的话 javascript里的关系又多又乱。作用域链是一种单向的链式关系，还算简单清晰；this机制的调用关系，稍微有些复杂；而关于原型，则是prototype、proto和constructor的三角关系。本文先用一张图开宗明义，然后详细解释原型的三角关系 图示概念上图中的复杂关系，实际上来源就两行代码function Foo(){};var f1 = new Foo();【构造函数
2017-09-11 15:35:48
204
转载 判断变量的类型（typeof、instanceof、Object.prototype.toString）
1、typeof 返回一个变量的基本类型，用来检测值类型的数据类型，只有以下几种：number,boolean,string,object,undefined,functionalert(typeof 1) //numberalert(typeof "1") //stringalert(typeof []) //objectalert(typeof null) //objectalert
2017-09-06 14:23:34
5775
转载 Array 的五种迭代方法 -----every() /filter() /forEach() /map() /some()
ES5定义了五个迭代方法，每个方法都接收两个参数：要在每一项上运行的函数和运行该函数的作用域对象（可选的），作用域对象将影响this的值。传入这些方法中的函数会接收三个参数：数组的项的值、该项在数组中的位置和数组对象本身。1.every() 和 some()every()是对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。some()是对数组中的每一项运行给定函数，如果
2017-08-18 14:07:44
434
原创 获取元素的宽和高
1、获取窗口的文档显示区的宽度和高度。//包含滚动条window.innerHeightwindow.innerWidth//不包含滚动条document.documentElement.clientHeightdocument.documentElement.clientWidth2、获取document的宽度和高度//name: width/heightfunction getWid
2017-07-26 17:35:41
911
转载 React Router 使用教程
本文介绍 React 体系的一个重要部分：路由库React-Router。它是官方维护的，事实上也是唯一可选的路由库。它通过管理 URL，实现组件的切换和状态的变化，开发复杂的应用几乎肯定会用到。 （[说明] 本文写作时，React-router 是 2.x 版，本文的内容只适合这个版本，与最新的 4.x 版不兼容。目前，官方同时维护 2.x 和 4.x 两个版本，所以前者依然可以用...
2017-07-25 16:46:56
394
原创 点击其他区域,input输入框不失去焦点
首先监听 document 的 mousedown 事件，然后判断触发 mousedown 事件的目标元素是不是你不想让input失去焦点的那个元素，是的话就阻止默认事件。 代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>input输入框</title><script> document.addEventL
2017-07-15 18:19:03
16254
1
转载 Webpack + react-router 按需加载
webpack + react-router 按需加载关键函数require.ensure(dependencies, callback, chunkName) 详情请见官方文档webpack 配置output: { path: path.join(__dirname, '../dist'), filename: '[name].js', sourceMapFilename
2017-07-13 11:42:22
4356
转载 javascript对象原型
实际上，虽然JavaScript 的对象最初都是由Object.prototype 对象克隆而来的，但对象构造器的原型并不仅限于Object.prototype 上，而是可以动态指向其他对象。 这样一来，当对象a 需要借用对象b 的能力时，可以有选择性地把对象a 的构造器的原型指向对象b，从而达到继承的效果。下面的代码是我们最常用的原型继承方式：var obj = { name: 'sven' }
2017-06-20 20:01:53
168
转载 call和apply
call 和applyECAMScript 3给Function 的原型定义了两个方法，它们是Function.prototype.call 和Function.prototype.apply。在实际开发中，特别是在一些函数式风格的代码编写中，call 和apply 方法尤为有用。在JavaScript 版本的设计模式中，这两个方法的应用也非常广泛，能熟练运用这两个方法，是我们真正成为一名JavaS
2017-06-15 16:14:50
165
转载 Vue2.0 事件发射与接收
由于vue2.0 移除了1.0中的$dispatch 和$broadcast 这两个组件之间通信传递数据的方法 ,官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口.请直接看代码,在初始化web app的时候，给data添加一个 名字为eventhub 的空vue对象new Vue({ el: '#app',
2017-06-06 17:09:30
415
转载 html转义
html转义 html转义是将特殊字符或html标签转换为与之对应的字符。如：< 会转义为< , >转义为 >, 像“<script>alert('test');</script>”这段字符会转义为：“<script>alert('test');</script>”。再显示时页面会将<解析为< , >解析为>, 从而还原了用户的真实输入,最终显示在页
2017-05-23 13:35:43
5591
转载 document.documentElement和document.body的区别,以及网页中获取滚动条卷去部分的高度
网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动：//html<div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div>//jswindow.onscroll = function() { va
2017-05-19 16:48:44
2113
1
转载 了解html页面的渲染过程
页面的渲染有以下特点：单线程事件轮询定义明确、连续、操作有序（HTML5）分词和构建DOM树请求资源并预加载构建渲染树并绘制页面具体来说： 当我们从网络上得到HTML的相应字节时，DOM树就开始构建了。由浏览器更新UI的线程负责。 当遇到以下情况时，DOM树的构建会被阻塞：HTML的响应流被阻塞在了网络中有未加载完的脚本遇到了script节点，但是此时还有未加载完的样式文件渲
2017-05-18 16:05:45
386
转载 git 版本回退[git reset --hard HEAD^]与查看修改点[git diff]
修改文件，然后把修改提交到Git版本库，修改readme.txt文件如下：Git is a distributed version control system. Git is free software distributed under the GPL. 然后尝试提交：$ git add readme.txt $ git commit -m "append GPL" [master
2017-05-17 17:55:23
9475
转载 css3中的width:100vh以及calc(100vh + 10px)
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小， 即window.innerWid
2017-05-17 13:34:25
45733
原创 javascript浅拷贝与深拷贝
比如，现在有一个对象，叫做”中国人”。var Chinese = { nation:'中国' };还有一个对象，叫做”医生”。 var Doctor ={ career:'医生' }浅拷贝 把父对象的属性，全部拷贝给子对象。function extendCopy(p) { var c = {}; for (var i in
2017-05-09 17:42:58
222
转载 Android在线更新SDK的方法(使用国内镜像)
本文讲述了Android使用国内镜像在线更新SDK的方法。分享给大家供大家参考，具体如下： 什么是Android SDK： SDK：（software development kit）软件开发工具包。被软件开发工程师用于为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。而 Android SDK 就是 Android 专属的软件开发工具包。 加速下载的方法： 由于
2017-05-09 15:23:56
969
2
转载 浏览器兼容问题
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性解决 -webkit-text-size-adjust: none;超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变 CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hov
2017-05-04 13:22:04
291
转载 使用CSS3实现表格隔行/隔列变色以及表格最小高度问题
table tr:nth-child(odd){background:#F4F4F4;}table td:nth-child(even){color:#C00;} 分别选择为：奇数行、偶数列
2017-04-27 14:33:57
631
转载 Commander写自己的Nodejs命令
1. commander介绍commander是一个轻巧的nodejs模块，提供了用户命令行输入和参数解析强大功能。commander源自一个同名的Ruby项目。commander的特性：自记录代码自动生成帮助合并短参数（“ABC”==“-A-B-C”）默认选项强制选项命令解析提示符2. commander安装npm install commander编写一个简单的例子：增加文件
2017-04-13 16:55:14
1358
原创 jQuery - 设置内容
1、text() 设置或返回所选元素的文本内容 text()会编码 HTML (将 “<” 和 “>” 替换成相应的HTML实体)。2、html() 设置或返回所选元素的内容（包括 HTML 标记） 3、val() 设置或返回表单字段的值具体的例子：js代码：$("#test1").text("<b>Hello world!</b>");$("#test2").html("<b
2017-04-13 15:59:33
220
转载 jQuery的deferred对象详解
jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能—-deferred对象。这个功能很重要，未来将成为jQuery的核心方法，它彻底改变了如何在jQuery中使用ajax。为了实现它，jQuery的全部ajax代码都被改写了。但是，它比较抽象，初学者很难掌握，网上的教程也不多。所
2017-04-13 12:43:26
228
转载 Javascript异步编程的4种方法
你可能知道，Javascript语言的执行环境是”单线程”（single thread）。所谓”单线程”，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascri
2017-04-13 11:17:52
234
转载 用CSS开启硬件加速
判断是运行在pc端，还是移动端(目前没有区分pad，pad环境下该值为true)const ua = navigator.userAgent;const isMobile = !!ua.match(/mobile/i) || 'orientation' in win; support3D：是否支持css硬件加速 supportHairline：是否支持0.5px的细线 suppo
2017-04-10 16:31:57
435
vue双向绑定实现解析
2022-06-20
TA创建的收藏夹 TA关注的收藏夹
TA关注的人