首先这篇文章的最佳读者是前端，当然你经常使用firebug也是可以试试。

可以买票前三天开始准备！，必须熟悉购票的完整流程。

第一章：怎样登陆12306

1、下载根证书、注册好账户，死活登陆不进去吧！这个我没有什么好办法，自己写一段简单的脚本自动重试，这个不是最好的办法。
建议提前一个小时就开始尝试登陆系统，成功了就可以按照下面的步骤了。

2、进入查询界面

打开firebug，网络

就像这样子

点击查询后就会有这样的一个请求：

https://dynamic.12306.cn/otsweb/order/querySingleAction.do?method=queryLeftTicket&orderRequest.train_date=2012-01-11&orderRequest.from_station_telecode=HZH&orderRequest.to_station_telecode=VAP&orderRequest.train_no=&trainPassType=QB&trainClass=QB%23D%23Z%23T%23K%23QT%23&includeStudent=00&seatTypeAndNum=&orderRequest.start_time_str=00%3A00–24%3A00

把这个请求地址记录下来！！

在新标签页中打开，可以看到这样的数据

为什么要把这个地址单独提取出来？是为了能够直接查询数据，而不用在页面上加载一些我们不需要的数据（为tdb减压啊！），更重要的是在这里！

查看这个的代码，在你想要的车次上的按钮上右键

复制这段代码，

<input type=”button” value=”预订” onclick=”javascript:getSelected(‘G32#06:24#07:17#5600000G3210#HZH#VNP#13:41#杭州#北京南#9198300026M105800125O063100364′)” onmouseout=”this.className=’yuding_u’” onmousedown=”this.className=’yuding_u_down’” onmousemove=”this.className=’yuding_u_over’” class=”yuding_u”>

这段代码就是关键，至于里面的参数除了最后一个9198300026M105800125O063100364′不容易明白其余的都很容易

———————————————————————–

最新研究发现可以这样做：

构造请求，直接跳过中间步骤！

需要构造的url是这样的，请对照上面的’G32#06:24#07:17#5600000G3210#HZH#VNP#13:41#杭州#北京南#9198300026M105800125O063100364′ 替换掉url的参数：

https://dynamic.12306.cn/otsweb/order/querySingleAction.do?method=submutOrderRequest&arrive_time=23%3A14&from_station_name=%E6%9D%AD%E5%B7%9E&from_station_telecode=HZH&from_station_telecode_name=%E6%88%90%E9%83%BD&include_student=00&lishi=06%3A38&round_start_time_str=00%3A00–24%3A00&round_train_date=2012-01-07&seattype_num=&single_round_type=1&start_time_str=00%3A00–24%3A00&station_train_code=G44&to_station_name=%E5%8C%97%E4%BA%AC%E5%8D%97&to_station_telecode=VNP&to_station_telecode_name=%E6%9D%AD%E5%B7%9E&train_class_arr=QB%23D%23Z%23T%23K%23QT%23&train_date=2012-01-07&train_pass_type=QB&train_start_time=16%3A36&trainno=5600000G4420&ypInfoDetail=9198300025M105800127O063100438

服务器检查referer了，所以够着好这个链接url需要找一个12306网页上的a链接，把href替换成这个链接

比如车票预定这里：

然后点击车票预定就可以到确认订单页面了

———————————————————————–

如果你的车次已经不能预订了，那就换一天的，换以前的，直到找到为止

接下来你要做的事事演练，找一个月黑的时候，在放票前，很不幸你的票已经售完了吧，就像这样：

很伤心~我们的那段代码派上用场了：

找到你要得那趟车，比如这个：

点击这个编辑：

用刚才的那段准备好的代码替换这个

看你的按钮亮了吧！

不过点击这个按钮是预定的北京的火车。

然后顺利进入购票页面，接着开始按照网上的另一篇教程修改乘车时间以及坐席类别

不要忙着提交，现在提交系统肯定会拒绝你购买的，票真的没有，就算你改了时间也是没有的。

你需要等着，等到放票时间开始后订票。

这期间你还要注意不要session过期（新开一个标签页面打开https://dynamic.12306.cn/otsweb/sysuser/user_info.jsp）几分钟刷新一次！（如果变成登陆界面千万不要去登陆，这个时候你应该还没掉线的，换个链接点击一下就可以了）

附上后续步骤的链接http://qing.weibo.com/2300267615/891b4c5f33000bub.html

大家会很奇怪为什么要让我保存input的那堆数据吧？

如果按照网络上的那篇文章前提是你必须要找到一个和你一样的车次，而且要可以预定！那样的基本上是很困难的事情，我们把这段代码保存下来之后就不用担心这个问题了！

这里有那么点小东西，先不说了，大家试试吧，成功了就分享一下。在实施这个方法之前请一定找个朋友在另一台电脑上正常为你购票。不保证系统会不会变更了。

另外请再找一个朋友帮你不停地打95105105,，多种方法一起才是王道。

祝愿大家都能买到票。祝愿12306不要502！

神马是Slide，就是每天我们在淘宝首页之类的地方看见的轮播图

Slide的初始化很简单：

Slide(‘#demo2′, {
effect: ‘scrolly’,
// slide特效组件其实不需要
aria:false,
easing: ‘easeOutStrong’
});

同样和Anim，此处是直接调用的Slide方法，在这个方法中会实例化一个Slide

function Slide(container, config) {

var self = this;

// factory or constructor
if (!(self instanceof Slide)) {
return new Slide(container, config);
}

Slide.superclass.constructor.apply(self, arguments);
}

new Slide之后就重新调用父类的构造器，Slide的父类是Switchable。

Switchable的构造器是核心的东西，主要包括三部分：配置文件的初始化、功能初始化、switch到配置文件指定的页

function Switchable(container, config) {
var self = this;

// 调整配置信息
……此处省略一些配置信息
var host = this.constructor;
while (host) {
config = S.merge(host.Config, config);
host = host.superclass ? host.superclass.constructor : null;
}
……此处省略一些配置信息
self._init();
self._initPlugins();
self.fire(EVENT_INIT);

if (self.activeIndex > -1) {
} else if (typeof config.switchTo == “number”) {
self.switchTo(config.switchTo);
}
}

配置文件的初始化主要的是markupType、向上历遍父类的的配置文件并合并在一起、配置第一次时展示的activeindex

switch到配置文件指定的页，只是调用switch方法

重点在于

self._init();
self._initPlugins();
self.fire(EVENT_INIT);

下篇文章继续跟进这些init。

这是一篇受密码保护的文章。您需要提供访问密码：

密码：

问题出在对form表单里面的DOM节点动画。

为了获取DOM在动画后的真实样式，KISSY采用的方式是复制DOM节点来达到相应的目的。

但是复制后会发生一个问题，form中的元素，特别是radio，如果有相同的name丢回丢失选中的值。

demo是这样的，当我们随便选中一个radio，点击测试，就会发现radio的位置变化了。

formbugtest

上一篇的准备工作都已经就绪，还没看见我们的动画动起来啊！

现在就要开始动了。

1、上一步正则化的数据完成了，赋值到targetStyle中。

2、合并默认配置，包括动画持续时间、缓动类型（有一篇文章已经详细介绍）、回调函数。

默认配置：

defaultConfig：
duration: 1
easing: ”easeNone”
nativeSupport: true

3、Anim的关键方法，run、stop等方法是通过S.augment处理。

    S.augment(Anim, EventTarget, {
        /**
         * @type {boolean} 是否在运行
         */
        isRunning:false,
        /**
         * 动画开始到现在逝去的时间
         */
        elapsedTime:0,
        /**
         * 动画开始的时间
         */
        start:0,
        /**
         * 动画结束的时间
         */
        finish:0,
        /**
         * 动画持续时间，不间断的话 = finish-start
         */
        duration:0,
        run: function() {
        },
        _complete:function() {
        },
        _runFrame:function() {
        },
        _nativeRun: function() {
        },
        stop: function(finish) {
        },
        _nativeStop: function(finish) {
        },
        _clearNativeProperty:function() {
        }
    });

4、继续进入run的方法中，首先初始化一堆参数,（接着尝试用fire启动anim start事件，如果fire成功那么run就完成）。

if (self.fire(EVENT_START) === false) {

    return;

}

if (self.transitionName) {

    // some hack ,Weird but ff/chrome need a break

    setTimeout(function() {

        self._nativeRun();

    }, 10);

} else {

     for (prop in target) {

         source[prop] = getAnimValue(elem, prop);

    }

    self.source = source;

    start = S.now();

    finish = start + duration;

    easing = config.easing;

    if (S.isString(easing)) {

        easing = Easing[easing] || Easing.easeNone;

    }

    self.start = start;

    self.finish = finish;

    self.easing = easing;

    AM.start(self);

}

KISSY的动画是通过Anim类的方式实现的。一般我们使用动画类都是这样：

Node.one(‘#test2′).animate(‘left: 500px’, 3, Easing.backOut);

在这个时候发生了那些事情呢，一步步跟踪看看：

1、经过一些简单的Node处理之后，会进入到function Anim(elem, props, duration, easing, callback, nativeSupport)

2、首先Anim会判断传入的elem是否合法，如果不合法就直接退出了

// ignore non-exist element

if (!(elem = DOM.get(elem))) {

    return;

}

// factory or constructor

if (!(this instanceof Anim)) {

    return new Anim(elem, props, duration, easing, callback, nativeSupport);

}

在那些浏览器下会有跨域问题：http://www.36ria.com/3890

postMessage方式对于ie这样顽固的浏览器是无效的，我们采用一个变通的方式window.name来实现ie6、7下面的跨域。

简单的封装了一下：

	/**
	 * postMessage类，用于跨域传输消息
	 */
	function Message() {
		var self = this;

		this.callbackList = [];

		/**
		 * 发送消息到指定的window或者contentWindow
		 * @param target [DOM] 发送的目标
		 * @param data [String] 消息正文（不超过2M）
		 */
		this.send = function(target,data){
			//如果target没有那么属性说明不是window或者iframe contentWindow，此处简单判断，可以加强
			//if(!target.name) return;

			if (window.postMessage) {
				target.postMessage(data, '*');
			}else{
				target.name = data;
			}
		};
		/**
		 * 绑定事件监听，到接收到消息后触发回调函数
		 * @param callback [Function] 参数为data
		 */
		this.on = function(callback){
			if(typeof callback !== 'function') return;
			this.callbackList.push(callback);
		};
		this._trigger = function(data){
			for(var i = 0; i < this.callbackList.length; i++){
				this.callbackList[i].call(window,data);
			}
		};

		if (window.postMessage) {
			if (window.addEventListener) {
				window.addEventListener("message", function(e) {
						self._trigger(e.data);
					}, false);
			} else if (window.attachEvent) {
				window.attachEvent("onmessage", function(e) {
						self._trigger(e.data);
					});
			}
		} else {
			var hash = window.name = '';

			setInterval(function() {
				if (window.name !== hash) {
					hash = window.name;
					var tmp = hash;
					hash = window.name = '';
					self._trigger(tmp);
				}
			},
			50);
		}
	}

使用方式很简单，假如有两个页面

• a.com/main.htm
• b.com/i.htm

第一个页面接受第二个页面发送的消息，在a中：

var msg = new Message();
msg.on(function(data){
    alert(data);
    //处理接收到的data
});

b中：

var msg = new Message();
msg.send(window.top,'my message from b!');

同样a也可以发送消息给b，并且b监听事件。

这个button正常情况下是有背景图片的

第一次的写法是这样，

看起来完全没问题,但是在ie6下面,有可能(某些版本的ie6、sogou,具体未知)就没有背景了。然后把background-image换成background就好了

记录一下，希望有用。

ant需要java运行环境。

在继续往下看之前的前提是你已经有安装好java环境了。

首先：需要下载Ant，解压到一个目录。（http://www.apache.org/dist/ant/binaries）

比如我解压到x:worklibant

准备工作完成。

接下来在你的工作目录创建一个build.bat文件。

SET PATH=X:worklibantbin;%PATH%
SET ANT_HOME=X:worklibant

ant -version
ant
pause

完成！，你可以在这个目录下创建你需要的build.xml文件。需要运行的时候双击build.bat。

最后说一下：build.bat是windows下的批处理文件，可以做很多事情（包括ant会的文件删除、创建、修改、合并等等）。

但是这次我们只是简单的利用批处理文件的修改文件查找路径（PATH变量），这样修改的只会在当前的cmd窗口中生效，

当关闭这个窗口之后所有的又回梦了。

这样做的好处是：

1、可以携带我们的ant在其他任意电脑上干活（只要把libant,还有你的项目目录随时携带，当然最好的方式是通过同步工具同步）。

2、还有个没有验证的好处是可以保持电脑的清洁，不太确定环境变量多了会不会影响电脑速度。

如果你看完这个方法之后觉得jdk也是个累赘的话也可以试试这样做。

先解释什么叫缓动函数。这个的从物理的角度描述了。

我们都知道自由落体运动，理想情况下，自由落体就是一个速度不断加快的运动。

用函数表示就Y=kX²

所有感觉很舒服的动画总会或多或少的使用各种缓动效果

Robert Penner 博士的缓动函数介绍

使用缓动之后的动画会让人感觉很自然.

KISSY中的缓动函数定义在srcanimeasing.js

/**
             * Uniform speed between points.
             */
            easeNone: function (t) {
                return t;
            },

            /**
             * Begins slowly and accelerates towards end. (quadratic)
             */
            easeIn: function (t) {
                return t * t;
            },

            /**
             * Begins quickly and decelerates towards end.  (quadratic)
             */
            easeOut: function (t) {
                return ( 2 - t) * t;
            },

            /**
             * Begins slowly and decelerates towards end. (quadratic)
             */
            easeBoth: function (t) {
                return (t *= 2) < 1 ?
                    .5 * t * t :
                    .5 * (1 - (--t) * (t - 2));
            },

            /**
             * Begins slowly and accelerates towards end. (quartic)
             */
            easeInStrong: function (t) {
                return t * t * t * t;
            },

            /**
             * Begins quickly and decelerates towards end.  (quartic)
             */
            easeOutStrong: function (t) {
                return 1 - (--t) * t * t * t;
            },

            /**
             * Begins slowly and decelerates towards end. (quartic)
             */
            easeBothStrong: function (t) {
                return (t *= 2) < 1 ?
                    .5 * t * t * t * t :
                    .5 * (2 - (t -= 2) * t * t * t);
            },

            /**
             * Snap in elastic effect.
             */

            elasticIn: function (t) {
                var p = .3, s = p / 4;
                if (t === 0 || t === 1) return t;
                return -(pow(2, 10 * (t -= 1)) * sin((t - s) * (2 * PI) / p));
            },

            /**
             * Snap out elastic effect.
             */
            elasticOut: function (t) {
                var p = .3, s = p / 4;
                if (t === 0 || t === 1) return t;
                return pow(2, -10 * t) * sin((t - s) * (2 * PI) / p) + 1;
            },

            /**
             * Snap both elastic effect.
             */
            elasticBoth: function (t) {
                var p = .45, s = p / 4;
                if (t === 0 || (t *= 2) === 2) return t;

                if (t < 1) {
                    return -.5 * (pow(2, 10 * (t -= 1)) *
                        sin((t - s) * (2 * PI) / p));
                }
                return pow(2, -10 * (t -= 1)) *
                    sin((t - s) * (2 * PI) / p) * .5 + 1;
            },

            /**
             * Backtracks slightly, then reverses direction and moves to end.
             */
            backIn: function (t) {
                if (t === 1) t -= .001;
                return t * t * ((BACK_CONST + 1) * t - BACK_CONST);
            },

            /**
             * Overshoots end, then reverses and comes back to end.
             */
            backOut: function (t) {
                return (t -= 1) * t * ((BACK_CONST + 1) * t + BACK_CONST) + 1;
            },

            /**
             * Backtracks slightly, then reverses direction, overshoots end,
             * then reverses and comes back to end.
             */
            backBoth: function (t) {
                if ((t *= 2 ) < 1) {
                    return .5 * (t * t * (((BACK_CONST *= (1.525)) + 1) * t - BACK_CONST));
                }
                return .5 * ((t -= 2) * t * (((BACK_CONST *= (1.525)) + 1) * t + BACK_CONST) + 2);
            },

            /**
             * Bounce off of start.
             */
            bounceIn: function (t) {
                return 1 - Easing.bounceOut(1 - t);
            },

            /**
             * Bounces off end.
             */
            bounceOut: function (t) {
                var s = 7.5625, r;

                if (t < (1 / 2.75)) {
                    r = s * t * t;
                }
                else if (t < (2 / 2.75)) {
                    r = s * (t -= (1.5 / 2.75)) * t + .75;
                }
                else if (t < (2.5 / 2.75)) {
                    r = s * (t -= (2.25 / 2.75)) * t + .9375;
                }
                else {
                    r = s * (t -= (2.625 / 2.75)) * t + .984375;
                }

                return r;
            },

            /**
             * Bounces off start and end.
             */
            bounceBoth: function (t) {
                if (t < .5) {
                    return Easing.bounceIn(t * 2) * .5;
                }
                return Easing.bounceOut(t * 2 - 1) * .5 + .5;
            }

基本上KISSY已经把所有我们可能用的到的缓动函数都已经写好了.