不破小子

原创 教你如何读取一个目录的json文件，然后转化地理坐标，并下载

1.利用require.context读取某个目录的json文件的内容 function dynamicImportData(){ const context = require.context('./data',true,/\.json$/); // 遍历所有 const tempDataLst = []; let dataList = []; context.keys().forEach((item)=>{ tempDataLst.pus

原创 在本地提交代码到github主分支同时提交到gh-pages分支

在.git==>config 文件中添加以下两句话：push = +refs/heads/master:refs/heads/gh-pagespush = +refs/heads/master:refs/heads/master

原创 gulp-jshint编译出错

解决方法：npm install --save-dev  jshint gulp-jshint参考资料：点击打开链接

原创 scroll事件在微信安卓端的研究

该需求在chrome调试模式下的手机以及oppo安卓手机自带浏览器、ios微信端滑动很流畅，但是在安卓微信端scroll事件有点延迟，怎么办

原创 高性能javascript技巧

1.document.createDocumentFragment2.变量缓存，避免原型链查找参考资料：Web性能优化系列：10个提升JavaScript性能的技巧                JavaScript DocumentFragment：更快捷的操作DOM的途径

转载 前端懒加载以及预加载

1.左侧宽度固定，右侧宽度不固定 .left{float:left;width:200px;} .right{overflow:auto;}参考资料：史上最全布局

原创 前端水平居中以及垂直居中方法积累

1.水平居中1.1已知宽度块元素宽度 :.child{width:1000px;margin:0 auto;}1.2文本内容居中:.parent{text-align:center;}1.3通过表格:.child{display:table;margin:0 auto;}1.4已知宽度,通过设置position:absolute,margin-left为宽度的负一半.parent{positi

原创 css3实现冲击波效果

近日，很多浏览器按钮点击会出现以下冲击波效果，出于好奇，参考网上的资料，将这个效果研究实现下。        实现思路：观察波由小变大，涉及的css3属性变化有width,height,left,top,opacity,首先通过伪类实现冲击波层，同时需要设置冲击波前后的中心点位置（这里涉及一点点数学知识:画图计算两个点的位置),最后设置transition-duration: 0实

转载 node.js入门

Node.js简介nodejs并不是一门新的语言，与Java，PHP开发语言的平台也是不相同的，虽然他是JavaScript但是它并不是JavaScript的框架。nodejs是让JavaScript运行在服务器端的开发平台。当一种事务在一个领域独孤求败的时候就会想着进入另外一个领域，JavaScript已经在近几年已经一统的前端的江湖，所以已经开始进入服务端的领域。Node.js是基于C

转载 hack IE

转载 关于伪元素和伪类

转载 web移动开发讲座截图

转载 如何在git bash上使用vim

1、vi & vim 有两种工作模式：（1） 命令模式：接受、执行 vi & vim 操作命令的模式，打开文件后的默认模式；（2） 编辑模式：对打开的文件内容进行 增、删、改 操作的模式；  #在编辑模式下按下 ESC 键，回退到命令模式。2、创建、打开文件：$ vi [filename]（1）使用 vi 加 文件路径（或文件名）的模式打开文件，如果文件存在

原创 node---express框架搭建

一.搭建express1.dos命令行执行 npm install -g express npm install -g express-generator 2.检测express是否安装成功 express -V如下图： 3.进入node.js安装目录cd C:\Program Files\nodejs4.执行express -e test 之后报错，如下图： 网站查资

原创 git如何修改注释

1.如果是还没有push之前要修改注释可以先执行如下代码git commit --amend -m "XXXXX"后面直接按照往常push即可。2.push之后修改注释可以先执行上述命令，然后再暴力式执行如下命令： git push -f

原创 localStorage实现本地储存（永久性的，再木没有删除情况下）

1.假如我需要对从后台请求到的json数组进行本地存储，然后以后就可以减少ajax请求，我是这么做的： var resultData;//本地储存 if(typeof(window.localStorage.localPrizeData)=="undefined"){ getTurntableData(); }

原创 如何配置android studio环境实现ionic的编译，运行与打包

1.配置android studio 环境;1.1配置java环境 下载jdk,jre（jre好像是跟jdk一起的，jdk1.8.0_101，jre1.8.0_101） 参考文档:如何配置jdk,jre的参考文档 配置的环境变量：PATH(jre/bin以及bin目录),ClASSPATH(lib以及lib/tools.jar目录),JAVA_HOME(jdk的安装目录) 测试配置java

原创 如何用git命令行上传本地代码到github

注意：安装的前提条件是配置好git的相关环境或者安装好git.exe，此处不再重点提及        上传的步骤：(本文采用git 命令界面进行操作)        1.进入本地的项目目录，右键“Git Bash here”,调出git命令行界面，然后输入git init        2.就是将目录下的所有文件上传，也可以将“.”换成具体的文件名git add .

原创 github如何删除项目

1.如何删除github上的项目   进入在github上的项目如下图1：                                                                                                图1      然后看到上面的settings选项，点击进入，看到图2，如下

原创 webpack的学习

1.webpack的作用与功能：模块加载器以及打包工具；2.参考目录：http://webpack.github.io/, http://webpack.github.io/docs/3.webpack的优势：  4.使用

原创 实现复选框，单选框附加上美图并实行动画思路分析

1.   XXXXXX    实现思路： (1)在input设置id，然后在label标签设置for属性指向input的id; (2)将复选框设置为display:none,input[type="checkbox"]{display:none;} (3)在label标签以内实现具体的图片或者内容（用xxxx代替） (4)当复选框为checked状态下实现label

原创 用ionic 创建新项目

1.安装ionic/Install Ionic(必须安装好node.js)npm install -g cordova ionic2.通过ionic创建新项目（tabs是ionic的一个组件，blank就是空白页）ionic start myApp tabsionic start myApp blank3.安装ionic/Install Ionic运行我

原创 h5游戏开题篇（不知道从哪位大神那里偷到一张图片）

原创 毕业设计总结篇之终结篇——基于android的创意展示平台（混合app）

在经过差不多三个月左右的时间，（ps:此时我正在碧桂园橙家实习了)我终于大体上完成“玩转创意街”APP的制作，想想答辩前的一个星期，我还在担心有些功能没有做好，系统不完整怎么办，还好坚持下来，为了让平台专栏那一块看起来内容很精彩，我和我的小伙伴手动在后台管理系统录入数据，上传照片，想想我都手软，此时，舍友们还在很轻松地看视频中，太淡定得让我不淡定，经过一天一夜，终于录完数据，总算送了一口气。

原创 jquery的ajax实现jsonp的两种方式

在项目实际开发中，经常会遇到需要跨域的问题，采用比较方便的方法，就是前后端一起统一数据的类型，采用jsonp格式,如何在jquery的ajax方法中使用jsonp，据我所知有如下两种方式： 1.在ajax请求地址的后面带一串参数"?callback=JSON_CALLBACK" 2.在ajax方法中添加属性“jsonp”:"callback"

原创 毕业设计总结篇之中篇——基于android的创意展示平台（混合app）

题外话，话说今晚一边吃饭一边看《蜡笔小新》XX部之北海道旅行，心情轻轻松松的，纯粹的搞笑场景让我回想起小时候看《蜡笔小新》的感觉，又有点不一样了，不知道怎么说。     还是步入正题吧，“玩转创意街”是我第一个相对完整的作品，在设计这个原型和交互的过程中，我尽量去参考现有比较出名的app，像微信，QQ，蘑菇街，创意相关，快看漫画等等，进行快速的对比和设计。     待续。。。。。

原创 npm初步了解

1.新版的nodejs已经集成npm模块，在dos命令行测试node,npm是否安装成功，可以这么做：         敲入：node -v,npm -v，如果显示版本号说明安装成功；     2.了解npm的功能：可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包；3.window上如何更新npm，dos命令行输入： npm install npm -

原创 毕业设计总结篇之开题篇——基于android的创意展示平台（混合app）

话说从毕业之后，不知不觉度过了两个月，最近看到csdn某位牛人的博客，我又想起了我的毕设作品——这一年多学习前端的完整的处女作。经过多次的励志篇之后，我更加相信很多东西在于坚持，坚信以及奋斗，一切都是时间的问题，无论是IT界的技术牛人，还是娱乐界，就像赵丽颖（她也是经过7,8年的时间才慢慢出名），都是敢于吃苦的人！      我发现善于总结和分享，像小孩子保持天真的好奇心不断学习的人才是真正厉

原创 手风琴效果实现

近日，为了仿照1688阿里巴巴进货网站的手风琴效果，从js实现—-》css实现—–》js实现（js主要是结合jquery实现）进行研究1.实现主要有如下两种思路1.1通过设置在正常情况下left以及在hover状态下的left1.2通过设置在正常情况下的width以及在hover状态下的width总结：1.通过设置left比设置width会比较麻烦点，需要设置不同标签在不同状态下的left属性，而w

原创 关于javascript "use strict"的学习

关于javascript “use strict”的学习参考资料：阮一峰http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

原创 jquery实现点击空白处隐藏弹框

1.e.target!=clickTarget&&$(e.target).closest(".aside-navbar").length==0思路：1.判断当前点击的对象是不是那个你想要的点击对象； 2.利用jquery closet（获取第一个相匹配的祖先元素，注意：起始点包括自身元素）判断当前点击的对象是否有这个“.aside-navbar” 这个祖先，包括自身

原创 vue框架知识积累

1.在实际项目中，经常会用到多种模板结合在一起使用，比如thinkphp，artemplate，vue模块，很多模板都会使用这种“{{}}“转义符号去解析，在vue中为了避免这种冲突，可以使用如下接口   Vue.config.delimiters:默认值为：['{{', '}}']；2.使用vue.directive写指令前要实例化vue对象（真奇葩，我居然会不懂这个道理，js都

原创 前端疑问

1.inline-block造成空白实例：制作水平导航栏的思路            1.1使用浮动，缺点需要清除浮动；    1.2使用inline            1.3使用inline-block,会造成空白，为什么？

原创 vue框架使用积累

1.如何解决vue框架模板引擎与其他模板引擎冲突Vue.config.delimiters =['${','}']；//比如这种

原创 如何在interlliJ IDEA上配置tomcat

1.先安装好jre和jdk2.在interllij IDEA右上角上单击击“Edit Configurations”,弹出框 在弹框的左上角点击绿色的“+”之后，添加local的tomcat Server 3.参考文章：http://tanghenxin.blog.163.com/blog/static/213511105201502211953297/

原创 css实现三角形原理

/*div{display:inline-block;}*/.rectangle{width:200px;height:100px;background-color:cornflowerblue;border:20px solid #C4E3F3;}.rectangle-without-width{height:100px;width:0;background-color:cornflow

原创 clip 学习

clip:css2的一个属性，用来裁剪绝定位的元素，用法为clip:rect(0px,100px,200px,0px);第一个参数为上边距离top的距离，第二个参数为右边距离left的距离，第三个参数为下边距离top的距离，第四个参数为左边距离left的距离利用这个属性可以实现以下例子：1.实现半圆      .pie{width:200px;height:200px;

原创 prefixfree.min.js插件的了解

该插件可以让前端开发者在写css3时不用写浏览器前缀名，下载处请戳：http://leaverou.github.com/prefixfree/，该插件也有弊端，对于一些不支持或者禁用js的浏览器用户是很不友好的，很可能会打乱布局

原创 angular框架知识积累

1.强悍的指令directive      但是要注意的是当指令写在dom节点标签上时，指令名称要写成third-nav2.强悍的过滤器   多级过滤,自定义过滤器,模拟后台接受前端请求进行查询  3.强悍的路由（ui-route）   关键字：ui-sref,ui-view,ui-sref-active  注意：1.如果有控制器

原创 swiper插件

近日，因为公司官网开发需要，用了angularjs框架，此外，因为很多图片需要轮播，由于自己写的轮播图在angular指令中的索引值从绑定箭头和圆点点击事件切换过程没有全局变化，无奈之下，用了比较流行的swiper插件。在使用swiper插件时发现，swiper基本使用有以下两个缺点：      1.初始化时如果没有设置"loop:true",swiper的箭头点击事件会受到限制，当索引值