置顶那一年

白驹过隙,时光荏苒。

彩虹 过去的东西一再不复返,别等到失去的时候,才知道珍惜。

More...

巧用label标签实现JQ的slideUp效果。

如果有一个需求要点击实现JQ的slideUp效果,不能要用到JQ,使用原生的JS,那你肯定想到的就是,通过点击给元素添加另外的样式 height 加高,或者减少,但是很明显,这个效果并不是很好,反而会很死板,没有动画的效果,像是实现了折叠面板的意思,但我们并不需要这个,有动画才好看!所以你肯定想到用 css3 的 transition 属性添加动画,这就对了!
完成了需求(有点偏题),但这次说的不是你用 JS 多6,用label 也能实现动画slideUP,不需要JS 岂不是很酷?!
看下面的代码:

More...

移动端仿旅游日历,带时间,价格和余位显示~

先看效果图:

2121.png

因为项目中的需要,在做旅游产品的微店时用到选择的时间,而且时间日历上要包含价格和余位等参数。
翻阅了其他资料,自己整理了一下,重新写了一个简单版的日历带上价格和余位的。文件没有其他依赖,全都是原生JS写,因为要在微信浏览器上访问,所以能不用jquery就不用。
有什么问题疑问,欢迎补充。下面看代码:

More...

移动端仿APP侧滑列表删除功能。

因为之前的项目在做APP的时候需要这个功能,而且是动态获取的数据插入,也需要手动的添加新的模板,看了一些资料就自己开始写了这个简单的功能代码。代码可自行修改,可扩展强,没有其他依赖。
贴上代码:

More...

JS 移动端如何做类似淘宝搜索带检索的功能?

前言:有时候在做移动端的时候需要用到搜索功能,老板目标很明确,一定要做成类似淘宝或者其他移动端搜索的功能一样,边输入字符边检索查找。但是这样对于一个小项目或者初学来说不是很简单,实现思路也比较复杂,这里不多说,我们用下面的简单的方法也能实现你想要的实现效果。

More...

利用面向对象来做一个小游戏 —— 移动的马里奥。

看完之前的几篇面向对象的介绍,至少也应该了解了其工作原理和简单的用法,那么本章将做一个实例演示一下使用面向对象是如何制作小游戏的。
要求:要制作的马里奥是一个会按照你按键的方向移动。
分析思路:
1、如何通过按钮来控制 Mario 的位置
2、设计相关的对象( Mario 的坐标 x , y)
3、给每个按键设置点击事件

More...

JavaScript 中的面向对象编程(四)。

非常荣幸的你能看前面三篇,接这一篇进入正题了,在对之前几篇的介绍也看出来了基本模式,工厂模式,构造模式,原型模式的不足,那么这篇再来说一下两者的结合 — 构造模式和原型模式的结合。这也是目前使用最多,也是最为常见的创建对象的方法,这种方法的概念就是:用构造函数来定义是所有的非函数属性,用原型链来定义对象的函数属性(方法)。结果是所有的函数就创建一次,而每个对象都具有自己的对象属性实例。此外,这种方法还解决了原型链不能传递参数。
在我们所知的 JS 库中,jQuery类型的封装就是使用的原型链和构造模式一起实现的。
下面看实例代码:

More...

JavaScript 中的面向对象编程(三)。

接上篇介绍的构造函数模式,这篇就来了解一下什么是原型链Portotype模式是怎么创建函数的,使用这个创建相比上面的几个有什么优势和不足。
我们上面介绍了构造函数模式在创建很多个实例的时候也是会占用很多的内存,每创建一个系统就会自动的为它分配一个空间,这就表示如果项目很大有很多的实例那样分配的空间会成百上千,会造成内存的浪费,更重要的是运行速度的缓慢,所以为了解决这个问题我们可以使用原型链Prototype模式来创建。
说明一下,JavaScript中规定,每个构造函数中都有一个prototype属性,指向的另一个对象。这个对象的所有属性和方法,都会被构造函数的实例所继承。所以可以把那些不变的属性和方法,直接定义到prototype对象。

More...

JavaScript 中的面向对象编程(二)。

接着上篇介绍的在 JavaScript 中面向对象编程的工厂模式,我们发现其实这个模式虽然解决了基本模式的创建多个对象的麻烦,但是呢还有一些问题的,当然,这些问题也是可以解决的。那么本章来介绍一下如何解决上篇留下的的问题并去改进它。首先,用构造函数有什么好处:

① 使用了 new 调用的函数为构造函数,构造函数和普通函数区别仅仅在于是否使用了new 来调用
② 所谓“构造函数”,就是专门用来生成“对象”函数,它提供模板作为对象的基本结构,其他的就属于基本普通的函数
③ 构造函数内部使用了 this变量。对构造函数使用new 运算符,就能生成实例,并且this 变量会绑定在实例对象上
虽然构造函数解决了是否使用的 new 关键字来调用的,但是也没有解决 工厂模式出现的浪费内存的问题:每生成一个实例,都会增加一个重复的内容。

More...