2017年01月_安静的对折

08月 07月 06月 04月 01月

原创用angular实现多选按钮的全选与反选

在页面中我们常常会遇到多选框，例如购物车里的商品下面用angular来实现这一功能全选: {{ item }}{{arr}} //创建模块 angular.module("select", []) //控制器 .controller("moreSel", functio

2017-01-17 22:24:22 2608

原创 js中in操作符

in 操作符用来判断属性是否存在与对象中。使用 in 操作符分单独使用和在 for-in 循环中使用。在单独使用时， in 操作符会在通过对象能够访问给定属性时返回 true ，无论该属性存在于实例中还是原型中 function FF() { this.age = 11; } FF.prototype.name =

2017-01-16 22:41:55 7176

原创 js中object类型中的三个方法

hasOwnProperty() ：用于检查给定的属性在当前对象实例中是否存在isPrototypeOf() ：用于检查传入的对象是否是传入对象的原型propertyIsEnumerable(propertyName) ：用于检查给定的属性是否能够被枚举 function F1(name){ this.name = name

2017-01-16 22:36:18 872

原创 js中的闭包

定义：只有函数内部的子函数才能读取函数的局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数，并且返回了该内部函数” // 只有函数内部的子函数才能读取函数的局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数，并且返回了该内部函数”// 为了读取f1函数中的局部变量，在f1中定义了一个子函数f2，函数f2就可以访问f1函数中的局部变

2017-01-16 22:29:00 298

原创 js中函数可以作为参数和返回值

js中函数可以作为参数和返回值，来看看下面的排序 function Student(name, height, weight) { this.name = name; this.height = height; this.weight = weight; } //创建对象 var st

2017-01-15 22:50:02 4183 1

原创 js页面跳转并传值的常用方法

在前端开发中我们常常需要从一个跳到另一个页面，并且将当前页面的数据传递过去，我常用下面两种方法1、在url路径后面带参数，参数与url之间用?隔开，参数与参数之间用&符隔开 window.location.href = "a.html?name='kevin'&age='20'";2、通过localStorage 和 sessionStorage 先存本地在取出数据用setI

2017-01-15 20:55:36 13895

原创 JavaScript中的apply()方法和call()方法

相同点：apply和call方法都是Function.prototype原型中，他们可以改变this的指向，而且都是直接调用函数不同点： apply：参数传入的是数组call：参数传入的是一个一个的 //call和apply通过对象调用的时候,如果传入的是null,那么函数中的this就是window对象 //cal

2017-01-15 20:20:53 369

原创使用canvas实现行走的小人动画

用canvas实现朝四个方向行走的小人，也可是使用键盘方向键操作行走的方向，其实就是用canvas不停的清除重画 canvas { border: 1px solid red; } 您的浏览器不支持canvas，请升级到最新的浏览器 var cas =

2017-01-15 16:47:01 11339 1

原创用canvas实现围绕旋转动画

使用canvas的convas来实现围绕旋转动画，外圈顺时针，里层逆时针代码demo链接地址代码demo链接地址html文件 body { margin: 0; padding: 0; overflow: hidden; b

2017-01-14 23:23:46 5859

原创用js实现五子棋

思路：1、先用canvas画五子棋的棋盘2、获取鼠标点击的位置3、根据鼠标点击的位置判断，并画棋子4、根据下的棋子判断是否赢了 * { padding: 0; margin: 0; } canvas { margin: 10p

2017-01-11 23:49:46 846

原创 CSS3背景图片尺寸属性

1、background-origin 规定 background-position 属性相对于什么位置来定位a、padding-box 背景图像相对于内边距框来定位b、border-box 背景图像相对于边框盒来定位c、content-box 背景图像相对于内容框来定位2、background-clip 规定背景的绘制区域，也就是背景图片显示的区域a、border-box

2017-01-11 23:20:20 2506

原创使用纯CSS3实现转动时钟案例

使用纯CSS3属性来实现转动时钟 .box { width: 200px; height: 200px; border: 10px solid #ccc; border-radius: 110px; margin: 100px

2017-01-10 23:55:45 6319

原创使用Html5实现手风琴案例

使用H5实现横向的手风琴功能 * { padding: 0; margin: 0; } div { width: 522px; height: 222px; margin: 50px auto;

2017-01-09 22:52:41 5225

原创前端C3属性模仿支付宝咻一咻

使用c3的动画属性，来模拟支付宝的咻一咻功能，没有添加音频效果，可以使用H5的audio音频标签来实现音效播放 html, body { width: 100%; height: 100%; } body{ display: flex;

2017-01-08 23:12:08 701

原创 H5C3实现无缝轮播

我们可以使用H5C3的新属性来实现无缝轮播图，首先创建动画，然后使用动画属性，在将要轮播的图片复制一份，这样就可以实现图片的无缝轮播，但是这样实现有一个缺点那就是需要加载的图片更多了 * { padding: 0; margin: 0; } div {

2017-01-05 22:45:28 3383

原创使用jQuery实现无缝轮播图

轮播图我们很常见的功能，可以使用原生的js进行实现，也可以使用jQuery进行实现，还可以使用H5C3进行实现，当然也可以使用swiper插件很方便的实现，这里先用jQuery实现一个无缝的轮播。思路：1、首先获取要操作的对象2、设置鼠标移入移出时显示和隐藏左右按钮3、给左右按钮添加点击事件，让ul移动一个图片的宽度4、给对应的小按钮设置点击事件，已经添加背景色5、添加一个

2017-01-04 21:01:43 7859