分类 前端技术 下的文章

下载安装插件依赖npm install vue-wechat-title --save 在main.js中引入插件import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在路由文件 index.js中给每个路由添加titleroutes: [{ path: '/', name: 'index', component: index, meta:{ title:'首页' // 标题设置在这里 } },{ path:'/deta- 阅读剩余部分 -

第一步 node环境安装1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nodejs.org/en/ 或者 http://nodejs.cn/第二步 node环境检测为了快乐的使用命令行,我们推荐使用 gitbas1.1 下载git 并安装下载地址 https://git-for-windows.github.io/安装成功后 右键菜单我们可以看到 Gti Bash Here 。说明我们已经安装成功git1.2 检测node 是否安装成功右键空白,选择 G- 阅读剩余部分 -

如果需要将某个元素 在可以滚动元素(scroll)中设置为居中计算方法为: 需要的scrollleft + 普通居中时候的offsetLeft = 当前的scrollleft+当前元素的offsetLeft = 固定的当前元素在整个滚动条中距离左边的位置DEMO<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script s- 阅读剩余部分 -

随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然我们的技术不能是被拍死在沙滩上,我们还要支持,不支持的话,只能是你这个页面,这个产品被淘汰。那么为了不被淘汰,我们就要做些兼容性处理。 我写页面的时候用到过很多的flex布局,觉得非常好用。下面附上一篇不错的flex布局介绍的文章。 Flex 布局教程想了解的可以自己去看看这篇博文,或者自己百度,这里先部多做介绍,我们主要来说一说flex布局的兼容性问题。why?大家可能想问了,flex布局为什么会存在兼容性问题啊?- 阅读剩余部分 -

1、移动端web页面显示图片在ios下回出现图片透明非常浅的问题,使用如下代码解决:Element{ opacity: 1; } 2、iphone及ipad下输入框默认内阴影Element{ -webkit-appearance: none; } 3、html5调用安卓或者ios的拨号功能html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。<a href="tel:4008106999,1034">400-810-6999 转 1034</a> html5GPS定位功能具体请看:http:/- 阅读剩余部分 -

<input type="text" placeholder="请选择" readonly="readonly" unselectable="on"> 设置只读标签readonly="readonly",禁止光标显示unselectable="on" 但是这个Android机正常,ios,iphone 5(se)都还依然会出现光标所以在网上找了些资料,现在整理下,方案一<input type="text" value="test" onf- 阅读剩余部分 -

最近项目中用到了各种加密,其中就包括从没有接触过得aes加密,因此从网上各种查,官方的一种说法:高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准。这个标准用来替代原先的DES,已经被多方分析且广为全世界所使用。经过五年的甄选流程,高级加密标准由美国国家标准与技术研究院(NIST)于2001年11月26日发布于FIPS PUB 197,并在2002年5月26日成为有效的标准。2006年,高级加密标准已然成为对称密钥加密中最流行的算法之一。很显然,没啥卵用。最- 阅读剩余部分 -

在react中可以定义默认props,使用es5时,可以使用getDefaultProps:var MyDemo = React.createClass({ getDefaultProps: function() { return { name: 'demo' }; }, render: function() { return <h1>This is my {this.props.name}</h1>; } }); ReactDOM.render( <MyDemo />, do- 阅读剩余部分 -

@media screen and (width: 768px) and (orientation: portrait) { body{ width:320px; -moz-transform: scale(2.4); -webkit-transform: scale(2.4); -o-transform: scale(2.4); -ms-transform: scale(2.4); transform: scale(2.4); transform-or- 阅读剩余部分 -

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js拖拽效果</title> </head> <body> <div id="box"></div> <script type="text- 阅读剩余部分 -

call和applyobj.call(thisObj, arg1, arg2, ...); obj.apply(thisObj, [arg1, arg2, ...]); 两者作用一致,都是把obj(即this)绑定到thisObj,这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。绑定后会立即执行函数。唯一区别是apply接受的是数组参数,call接受的是连续参数。function add(j, k){ return j+k; } function sub(j, k){ return j-k; } 我们在控制台- 阅读剩余部分 -

因为嫌console.log()的写法太繁琐,想将其简写为log()。 我最初是这样写的: var log = console.log; log(..); 结果输出为:TypeError: Illegal invocation 谷歌一番之后在Stack Overflow上找到这个答案:var log = console.log.bind(console); 看到这个答案后,突然眼前一亮,因为我恰好刚刚在《You Don't Know JS》系列中读到过相关内容。虽然SO上只有答案没有解释,但是读过的内容瞬间在大脑中盘旋,帮我理解了这种写法的原理。刚刚学过的内容派上了用场,- 阅读剩余部分 -

jspm init初始化会报错,研究了一下午,因为原来一直好好的,错误信息:err TypeError: First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object. 如图: 研究了一下午啊,发现原来是后期本地安装git以及用git创建了项目造成了在git时需要配置用户名密码才能正常下载数据:配置命令:jspm registry config github 然后在jspm init 就正常了

http://photoswipe.com/documentation/api.html所有的方法和这个网页上列出的属性是公开的。如果你想看看例子什么API可以做的,拿在默认PhotoSwipe UI源看看。您可以初始化,例如在得到PhotoSwipe实例对象:var photoswipeInstance = new PhotoSwipe( /* ... */ ); Methodsvar pswp = new PhotoSwipe( /* ... */ ); // Initialize and open gallery // (you can bind events be- 阅读剩余部分 -

配置选项是在键 - 值对添加作为参数传递给PhotoSwipe构造,例如通过:var options = { index: 3, escKey: false, // ui option timeToIdle: 4000 }; var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options); gallery.init(); // Note that options object is cloned during the initiali- 阅读剩余部分 -

入门您应知道之前先做起事情:PhotoSwipe不是一个简单的jQuery插件,至少基本的JavaScript知识才能安装。PhotoSwipe需要预定义的图像尺寸(更多关于这一点)。如果您在非回应网站上使用PhotoSwipe - 控制将在移动进行换算(整页缩放)。所以你需要实现自定义控件(在右上角例如单个大关闭按钮)。文档中所有的代码是纯香草JS和支持IE8及以上。如果您的网站或应用程序使用了一些JavaScript框架(像jQuery或MooTools的),或者你并不需要支持旧的浏览器 - 随意简化代码。避免对移动服务的大图像(大于2000x1500px),因为它们会- 阅读剩余部分 -

转自http://blog.csdn.net/xiaoyu411502/article/details/467023911、引子以前介绍过 Sublime text 3 系列的文章,着重介绍了 Sublime text 3 如何下载、安装、插件、配置等内容。Sublime text 3的轻量和富扩展,为前端开发带来了很多的便捷,加快了代码的书写速度,尤其是配上 emmet,那书写速度堪称光速。现在,要隆重介绍的前端开发工具webstorm,为什么说它是前端开发工具,而不是前端开发编辑器呢?它具备的功能,不只只是编辑器这么简单,还包含了任务管理、历史管理、版本管理、工程管理、- 阅读剩余部分 -

重要提示:2.0不向后兼容以前的版本 这个插件可以很方便的对json操作,var thing = { plugin: 'jquery-json', version: 2.4 };//json对象 var encoded = $.toJSON( thing ); //将thing转为字符串,字符串格式如下 // '{"plugin":"jquery-json","version":2.4}' var name = $.evalJSON( encoded ).plugin; //将上面的字符串encod- 阅读剩余部分 -

省时的浏览器同步测试工具Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。1. 安装 Node.jsBrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js2. 安装 BrowserSync可以选择从Node.js的包管理(NPM)库中 安装BrowserSync。打开一个终端窗口,运行以下命令:npm install -g browser-sync 当然您- 阅读剩余部分 -

实现思路很简单,汉字有21个声母:b, p, m, f, d, t, n, l, g, k, h, j, q, x, zh, ch, sh, r, z, c, s有韵母24个,其中单韵母有6个:a, o, e, i, u, v, 复韵母有18个:ai , ei, ui , ao, ou, iu , ie, ve, er, an , en , in, un , vn , ang, eng, ing , ong假设声母和韵母两两组合的话,会有24X21=504种组合,实际情况是有些组合是没有意义的,比如zv, zie, zve等,去除这部分后,还剩余401种;这就- 阅读剩余部分 -

在chrome下:input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 在Firefox下:input[type="number"] { -moz-appearance: textfield; }如果感觉还不放心,吧下面的这段加上input[type="numbe- 阅读剩余部分 -

CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少。同一个项目,为了实现iPhone和iPad横板与竖板的风格,让我还是头疼了一翻。一开始按照CSS3 Media Queries模板中的介绍来运用,虽然帮我解决了iPad的横板与竖板的风格渲染问题,但在iPhone4上还是存在问题的。后来结过网上的查找,总算是问题解决了,下面就来看看问题是如何解决的。在具体开始之前,先来看看他的源码:<!DOCTYPE HTML> <html lang="en-US"> <he- 阅读剩余部分 -

那么今天我们就针对上面的问题,一起来探讨一下CSS3 Media Queries在各种不同设备(桌面,手机,笔记本,ios等)下的模板制作。那么Media Queries是如何工作的?那么有关于他的工作原理大家要是感兴趣的话可以参考《CSS3 Media Queries》一文,里面已经做过详细的介绍,这里就不在进行过多的阐述。CSS3 Media Queries模板CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满足就调用相应的样式。打个比方来说,如果你的Web页面在- 阅读剩余部分 -

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="al- 阅读剩余部分 -

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧。本文导航:gulp的安装开始使用gulpgulp的API介绍一些常用的gulp插件1、gulp的安装首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp:npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次。把- 阅读剩余部分 -

var fastAJax = function(args) { var xmlhttp = null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp == null) { args.handler(- 阅读剩余部分 -