用PHP写桌面程序


<p>写多了网页程序,是会对桌面程序抱有很深的怨念的。也不记得是哪天无意间搜到了PHP-GTK这种逆天的东西了,初看感觉道路一片光明(往后看你就会明白我为什么这么说了)。遂对它有了深深的执念。</p>
<p>下载了这货的二进制包,结果还搜了半天的教程才会使用它。而且官方手册没有中文包(虽然放了中文包的下载地址,不过居然404!满满的都是坑啊!),为此我还下了一番决定准备翻译官方文档呢。当然,目前为止我只是翻译了教程部分,关键的手册部分都木有开始就决定把这个计划腰斩了啊!如果有需要的同学可以点击这里:PHP-GTK 2教程。通篇教程是用MardownPad编写并输出的。你们不要问我为什么好好的分页教程被我活生生的整合到一个页面去了还不给打标签,我就是喜欢,你们能怎么样~恩哼!</p>
<p>简单说说PHP-GTK2这货怎么使用吧,其实没有官方手册讲的那么痛苦。首先去官方下载页面下载程序,你会发现很多各式各样英文名字很牛逼但是你完全不懂是什么的包,然后你最好遵从博主的建议去下载php-gtk-2.0.1 Windows binary pack这个文件。好了博主已经很好心的把你要下载的链接贴上来了,大家就快感恩戴德的去下载吧。下载好了之后把它解压到一个文件夹,比如就是<red>php-gtk2</red>这个文件夹好了。程序默认带了几个Demos,放置在demos文件夹下。打开CMD窗口进入到php-gtk2这个文件夹,运行<red>php demos/phpgtk2-demo.php</red>。然后很神奇的事情就发生了,哈哈!所以使用方法就是CMD到php-gtk2这个文件夹下然后带上你要运行的文件就好了。据说把文件夹加到环境变量中后不用cd到文件夹下也行,这个我没有多做测试,大家有兴趣可以测试一下。</p>



<p>大家可能要问我怎么将PHP程序打包成EXE程序了。目前我测试过许多方法,都不尽人意。表现最好的只有PriadoBlender这货了。什么?PriadoBlender这货是什么?对不起,虽然我很想贴一些简介来介绍一下它的,不过一个官网都死掉了的软件你想要官方简介?想多了吧亲!好吧,以上是调侃一下PHP-GTK2的穷途末路的,大家不要当真。PriadoBlender就是我说的打包程序了,它自己本身也是用PHP-GTK制作的。介于官网已死(有事烧纸都没用了!),博主我再次很好心的把它上传到了BOX上以供大家下载。新建工程输入工程名称、工程文件、工程输入文件夹、使用的PHP-GTK2版本,使用的PHP版本,点击编译稍等片刻就可以在输出文件夹发现一大片文件出现了,你的程序就编译成功了的说。顺带说一句,这货对中文的支持不是很好,工程名文件名文件夹名最好不要带中文,不要怪我没有提醒大家哦!</p>



<p>讲了如何使用如何打包,下面就要说说如何编写这个比较重要的问题了。不过这个问题其实我也是讲不了多少的,因为我本身也是在手册中学习的啊。所以还是比较推荐大家老老实实的把手册看一遍,这比什么都强啊。附上我今天花了一天的时间写的计算器代码,希望能帮助大家的学习。不要问我为什么一个简单的计算器还要写一点!木有办法,博主的智商博主自己也感到十分捉急啊!</p>

<?php
/*
//检查是否包含gtk,试试就可以了这部分代码其实可以删掉的
if (!class_exists('gtk')) {
    die("Please load the php-gtk2 module in your php.inirn");
}
*/

$wnd = new GtkWindow();
$wnd -> set_title('计算器'); //设置窗体的标题
$wnd -> set_default_size(228,322);  //设置窗体的默认大小
$wnd->connect_simple('destroy', array('gtk', 'main_quit')); //当关闭窗体的时候结束主程序
//看教程你就会知道为什么会有上面这句代码的存在

//制造控件
//把所有需要的空间制造出来
//暂时需要一个Label控件显示数字,0-9,小数点,加号,减号,等于号,清除键这几个按键
$CLabel = new GtkLabel('0');
$CButton = array(); 
for($i=0;$i<10;$i++) $CButton[] = new GtkButton($i);
$CButton['plus'] = new GtkButton('+');
$CButton['minus'] = new GtkButton('-');
$CButton['equal'] = new GtkButton('=');
$CButton['point'] = new GtkButton('.');
$CButton['clean'] = new GtkButton('C');

//控件布局
//$wnd最后只能添加一个控件,所以我们必须先用一个大容器把所有的小控件包进来,目前大容器是$table
//table的五个参数:控件,左边距,右边距,上边距,下边距
$CLabel -> set_justify(Gtk::JUSTIFY_RIGHT);  //居右,但是好像这句不来事。
$table = new GtkTable(5,4);  
$table-&gt;attach($CLabel, 0, 4, 0, 1);
for($i=1;$i<10;$i++) {
    $quotient = floor($i/3);
    $rest = $i % 3;
    if($rest == 0) {
        $rest = 3;
        $quotient--;
    }
    $top = 3 - $quotient;
    $bottom = $top+1;
    $right = $rest;
    $left = $right-1;
    $table-&gt;attach($CButton[$i], $left, $right, $top, $bottom);
}
$table-&gt;attach($CButton[0], 0, 2, 4, 5);
$table-&gt;attach($CButton['point'], 2, 3, 4, 5);
$table-&gt;attach($CButton['plus'], 3, 4, 2, 3);
$table-&gt;attach($CButton['minus'], 3, 4, 3, 4);
$table-&gt;attach($CButton['equal'], 3, 4, 4, 5);
$table-&gt;attach($CButton['clean'], 3, 4, 1, 2);

//添加控件信号绑定
//信号以为当做一个动作的时候产生的信号,下面的简单解释就是当点击按钮出发相应的函数
//GtkButton::connect_simple的参数:信号(例如点击),触发函数, 传递参数1, 传递参数2...
foreach($CButton as $name => $button) {
    switch($name) {
        case 'plus':
            $button-&gt;connect_simple('clicked', 'Plus', $CLabel);
        break;
        case 'minus':
            $button-&gt;connect_simple('clicked', 'Minus', $CLabel);
        break;
        case 'equal':
            $button-&gt;connect_simple('clicked', 'Equal', $CLabel);
        break;
        case 'clean':
            $button-&gt;connect_simple('clicked', 'Clean', $CLabel);
        break;
        default:
            $button-&gt;connect_simple('clicked', 'Cal', $button, $CLabel);
        break;
    }
}

//定义了三个全局变量,$number是用来存储输入的数字的,$method是用来存储运算法则的,$status用来存储输入状态的
//$method是当点击加减等于等功能键的时候进行赋值或者清空
//$status默认是为真的,也及时在输入状态,一当点击功能键则返回假,即非输入状态。存在这两种状态是为了区别没有点击功能键的时候输入数字是添加在末尾的,点击功能键之后输入数字是要清空标签控件然后添加的。
$number = 0;
$method = '';
$status = true;
function Cal(GtkButton $button, GtkLabel $CLabel) {
    global $status;
    $Text = $button->get_label();
    $BeforeText = $CLabel->get_text();    
    if($status && $BeforeText != '0')    {
        $Text = $BeforeText.$Text;
    } else {
        $status = true;
    }
    $CLabel-&gt;set_text($Text);
}
function Calculate(GtkLabel $CLabel) {
    global $number, $method;
    $num = $CLabel->get_label();
    switch($method) {
        case '+':    
            $number += $num;
        break;
        case '-':    
            $number -= $num;
        break;
        default:
        break;    
    }
}
function Plus(GtkLabel $CLabel) {
    global $number, $method, $status;
    if($method != '' && $status) {
        Calculate($CLabel);
    } else {
        $number = $CLabel->get_label();
    }
    $method = '+';
    $status = false;
    $CLabel-&gt;set_label($number); 
}
function Minus(GtkLabel $CLabel) {
    global $number, $method, $status;
    if($method != '' && $status) {
        Calculate($CLabel);
    } else {
        $number = $CLabel->get_label();
    }
    $method = '-';
    $status = false;
    $CLabel-&gt;set_label($number); 
}
function Equal(GtkLabel $CLabel) {
    global $number, $method, $status;
    Calculate($CLabel);
    $method = '';
    $status = false;
    $CLabel-&gt;set_label($number);
}
function Clean(GtkLabel $CLabel) {
    global $number, $method, $status;
    $number = 0;
    $method = '';
    $status = true;
    $CLabel-&gt;set_label($number);
}

//窗体添加控件
$wnd-&gt;add($table);
$wnd->show_all(); //显示所有控件
Gtk::main();  //进入主程序循环
?>

<p>程序的主要思路我也已经比较详细的注释在代码中了,有不懂的也可以在评论中提出。这里附上我打包好的计算器程序给大家提供参考学习,同样还是放在BOX的。不过打包好的程序文件夹大小居然有18M,压缩了也有6M这是直接打击我学习下去的想法啊。而且好像网上吐槽PHP-GTK的人还是比较多的,大部分的孩子都是说“这是PHP年轻时候干的傻事”,“这货一时爽,长期死全家”之类的。而且PHP说到底只是一单线程语言,对内存的控制也不是很好,想要用来写桌面程序真的是有点力不从心的。介于最近又在看Python,PHP-GTK又万年太监,官方文档也不清楚(基本的函数的参数解释都不全),最终决定还是放弃PHP-GTK的研究。最后感谢Jclyn同学的片头歌曲推荐。以上。</p>

<p>本文相关文件下载地址:PHP-GTK 2 | PHP-GTK2中文教程 | PriadoBlender | 自制简易计算器

初探<audio>标签实现同步显示歌词

今天群里的小胖说用<audio>标签写了个听评书的网页给父母用,技术实在是低级真心非常有孝心的说!然后我也顺带去了解了一下audio标签现在的支持情况,一不小心就脑补了一些新知识。看到了audio标签有duration属性和currentTime属性,分别用来读取歌曲总时间和当前播放时间,正好弥补了我之前想写播放器同步显示歌词一直卡在的如何获取播放时间的问题上。所以就开始操刀了。

歌曲和歌词的准备

我暂时是写到了之前的虾米搜索页面里面,实现搜索获得歌曲用audio标签播放并显示歌词。所以歌曲和歌词文件自然就来自盗版帝国虾米了。由于虾米的歌曲文件都是MP3格式的,所以悲剧如FireFox等虽然支持了HTML5但是不支持MP3格式的文件这让我也是感到很捉急的,所以暂时是推荐大家使用Chrome浏览器制作并访问的。关于目前各浏览器的支持情况可以看这里:居然连IE都支持了!这里利用了一下虾米的API:<red>http://www.xiami.com/song/playlist/id/歌曲ID<;/red> 获取歌曲的相关信息,其中就有歌曲地址和歌词。获取到的XML文件中,歌曲地址是加密放置的,至于解析原理,大家可以参见虾米音乐文件绝对地址解析。详细的解释一下就是:

获取到的字符串第一个字母是矩阵的行数,除去第一个字母的字符总数除以行数得到的整数是每行放置多少个字符,余数则是前余数行要在末尾多放置一个字符。这样就能组成引文中的矩阵了。按照竖行读取,^替换为0的处理后就可以获得绝对地址了。

懒惰如我为了方便自己,我把解析的过程写成了函数。最开始我是将字符串打散成为二维数组,然后嵌套循环连接字符串。后来觉得打散成一位数组应该会更方便一点,所以为了算获取数组索引顺序的规律,死了好多个脑细胞啊,果然数学已经忘到姥姥家了。

歌词由于后期要用js处理,js又不能跨域获取什么的。所以只能劳烦PHP获取到歌词地址后远程抓取过来了。以上解析得到绝对地址和歌词都是在服务器端完成的。我写成了API的形式,<red>http://imnerd.org/lab/search/api.php?id=歌曲ID<;/red>可以查看获取到的内容格式。

audio歌曲播放与暂停

果然我还是对解码什么的比较感兴趣,一不小心就偏题了呢。好啦好啦,以上都不应该是本文的重点啦,下面我们开始好好的蹂躏学习一下audio标签啦。audio标签的简单写法为

<audio src="歌曲地址"></audio>

控制歌曲的播放和暂停也是非常简单的,只要利用play()和pause()事件就好了,代码如下:

m = document.getElementsByTagName('audio')[0];
m.play(); //歌曲的播放
m.pause(); //歌曲的暂停

想要了解更多audio标签的属性和事件的话可以点击这里:HTML 5 视频/音频参考手册

同步显示歌词的实现

我在开头已经讲了,audio的currentTime属性可以获取当前播放时间。又如果你刚才有去点击上面的参考手册的链接的话,你就会发现audio还有一个神奇的timeupdate事件,目的是当目前的播放位置已更改时做出动作。也就是说我们可以利用timeupdate事件在currentTime变化的时候做出判断,然后放置相应的歌词。

基本方法大概就是这个样子,播放器的当前播放时间我们已经获取到了,剩下的就是获取歌词的播放时间的问题了。由于标准的歌词每行应该是“[你好我是播放时间,我的格式是分:秒]你好我是该播放时间下的歌词”这种格式的,想必大家早就了解了吧。利用正则获取split分割等一系列方法将歌词分割成一个二维数组,一纬为每行歌词,二维为每行歌词的时间和每行歌词的内容。其中歌词的时间由于是分钟:秒的形式,需要转化为单位为秒的数字。下面给出歌词转化为二维数组的方法。方法可能坑爹不是最好的,但是基本凑合,这一部分大家可以随意发挥:

//写成函数的形式大家可能会更好理解一点
function parseLyric(text) {
lyric = text.split('\r\n'); //先按行分割
var _l = lyric.length; //获取歌词行数
lrc = new Array(); //新建一个数组存放最后结果
for(i=0;i<_l;i++) {
    var d = lyric[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g);  //正则匹配播放时间
    var t = lyric[i].split(d); //以时间为分割点分割每行歌词,数组最后一个为歌词正文
    if(d != null) { //过滤掉空行等非歌词正文部分
        //换算时间,保留两位小数
        var dt = String(d).split(':'); //不知道为什么一定要转换时间为字符串之后才能split,难道之前正则获取的时间已经不是字符串了么? 
        var _t = Math.round(parseInt(dt[0].split('[')[1])*60+parseFloat(dt[1].split(']')[0])*100)/100; //这一步我自己都觉得甚是坑爹啊!
        lrc.push([_t, t[1]]);
    }
return lrc;
}

这样我们只要匹配歌词每行的时间和crrentTime就行了,如果当前播放时间超过了这一句歌词的时间,则显示这一句歌词,否则不显示。这是我们下面代码的关键判断。另外,这里我使用了一个自我感觉还不错的小技巧:显示完歌词之后立即将这行歌词从歌词数组中剔除出去,这样我们就永远只要将currentTime和lrc1比较就好了,而不用麻烦的去每个都去比较一下。

m.addEventListener('timeupdate', function() {
    if(audio.currentTime > lrc1) {
        document.getElementById('lrc').innerHTML = lrc1;
        lrc.shift();
    }
},false);
//addEventListener等同于m.timeupdate(function() {...});

歌曲播放并显示歌词的思路大概就这个样子了,具体的代码可以去看我的DEMO。DEMO只是给出了大概的功能,UI方面都还木有美化,大家习惯就好,这个是在是力不从心啊!本人一向也不是很在意UI的。最后的最后,感谢一下Jclyn帮我做了测试并推荐了本文开头的歌曲。哦,又突然想起来了,DEMO的范例是用JQuery操作的,虽然跟Javascript有些不同,但是对于思路什么的是没有问题的,有不懂的可以留言提问哦,我会看心情耐心解答的。

PageCookery微信机器人


<p>上传API文件到网站,微信添加PageCookery公共账号即可使用(下面有详细使用教程说明)。本机器人建立初功能比较薄弱,仅有绑定账号,发表状态功能,后续博主会再接再厉增加更多功能的。个人认为此微信公共账号变相地解决了PageCookery的手机客户端的问题。本账号还处于婴儿阶段,并未作过多的测试,欢迎大家反馈。</p>

<p>使用教程:</p>
<p>第一步:下载wechat.php并上传到PageCookery的根目录(请保证文件名为wechat.php)
</p>
<p>wechat.php源代码(请自行保存以下代码并上传至PageCookery根目录):

<?php 
include"config.php";
function sql_query($sqlcon){
    $con=mysql_connect(DATABASE_HOST,DATABASE_USER,DATABASE_PSSWORD);
    mysql_select_db(DATABASE_DB_NAME);
    mysql_query("SET NAMES 'utf8'");
    $result=mysql_query($sqlcon);
    mysql_close($con);
    return $result;
}
if(!isset($_GET['do'])) $_GET['do'] = '';
switch($_GET['do']){
    case'auth':
        $user=sql_query("SELECT * FROM user WHERE id= '".$_POST['usr']."'");
        $user=mysql_fetch_array($user);
        $pwd=md5($user['username'].$user['password']);
        if($pwd===$_POST['auth']){
            $j = array('code'=>true, 'message'=>'绑定成功,现在你可以发一条消息试试了!');
        }else{
            $j = array('code'=>false, 'message'=>'绑定失败,请输入正确的信息!');
        }
        echo json_encode($j);
    break;
    case 'post':
        $user=sql_query("SELECT * FROM user WHERE id= '".$_POST['usr']."'");
        $user=mysql_fetch_array($user);
        $pwd=md5($user['username'].$user['password']);
        if($pwd===$_POST['auth']){
            $userid=$_POST['usr'];
            $content=$_POST['content'];
            $time=time();
            $res=sql_query("INSERT INTO entry VALUES ('','0','$content','$time','微信','$userid')");
            if($res){
                $j = array('code'=>true, 'message'=>'发送成功!');
            }else{
                $j = array('code'=>false, 'message'=>'发送失败请稍后再试');
            }
        }else{
            $j= array('code'=>false, 'message'=>'您还未绑定网站或者之前的绑定已失效,请重新绑定!');
        }
        echo json_encode($j);
    break;
    case 'postfromgtalk':
        $user=sql_query("SELECT * FROM user WHERE id= '".$_POST['usr']."'");
        $user=mysql_fetch_array($user);
        $pwd=md5($user['username'].$user['password']);
        if($pwd===$_POST['auth']){
            $userid=$_POST['usr'];
            $content=$_POST['content'];
            $time=time();
            $res=sql_query("INSERT INTO entry VALUES ('','0','$content','$time','Gtalk','$userid')");
            if($res){
                $j = array('code'=>true, 'message'=>'发送成功!');
            }else{
                $j = array('code'=>false, 'message'=>'发送失败请稍后再试');
            }
        }else{
            $j= array('code'=>false, 'message'=>'您还未绑定网站或者之前的绑定已失效,请重新绑定!');
        }
        echo json_encode($j);
    break;
    
    case 'signature':    
        echo '<meta charset="utf-8" http-equiv="content-type" content="">';
        if(!isset($_POST['username'])) {
            echo '<form method="post" action="./wechat.php?do=signature"><p>用户名:<input type="text" name="username" value="" /></p><p>密  码:<input type="password" name="password" value="" /></p><p><input type="submit" value="确认" />';
        } else {
            $user=sql_query("SELECT * FROM user WHERE username = '".$_POST['username']."'");
            $user=mysql_fetch_array($user);
            if(md5($_POST['password']) === $user['password']) {
                $sig = $user['id'].md5($user['username'].$user['password']);
                echo '你的识别码是"'.$sig.'",请发送"-sig '.$sig.'"给PageCookery微信机器人完成绑定!';
            } else {
                echo '用户名或密码错误!';
            }
        }
    break;
    default:
        $j = array('code'=>true, 'message'=>'微信机器人平台搭建成功!');
        echo json_encode($j);
    break;
}
?>

</p>
<p>第二步:关注PageCookery微信机器人账号。微信中选择“朋友-添加朋友-查找微信公众账号”,输入pagecookery即可查到机器人账号,添加即可。或者直接扫描下面的二维码即可成功添加。<br/>PageCookery微信机器人</p>
<p>第三步:绑定自己的网站和账号。首先发送消息“-url 你的网站地址”,会让你跳转到另外一个页面,复制地址到浏览器中打开输入你的账号和密码后会返回识别码,复制识别码到微信中发送过去就完成绑定过程了。具体使用见下图:</p>
<p>第一次关注会提示你绑定网站,输入“-url 你的网站地址”即可完成绑定。<br/>绑定账号成功绑定账号成功</p>
<p>复制地址到浏览器中打开,并输入你的PageCookery账号和密码,网页会返回识别码,复制识别码发送给PageCookery微信机器人即可完成绑定。<br/>绑定账号成功绑定账号成功绑定账号成功</p>
<p>如果发送错误的识别码过去,机器人会提示绑定失败。<br/>绑定账号成功</p>
<p>绑定账号完成后直接输入消息就可以发布状态了。<br/>发布状态</p>

2012年小结之电影全记录


<p>由于豆瓣API的无能,这次的统计颇为烦恼啊。本次统计使用http://imnerd.org/lab/douban 工具得到,欢迎大家使用。</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";type="text/javascript"></script><script src="http://imnerd.org/lab/douban/res/highcharts.js";type="text/javascript"></script><script type="text/javascript">$(function(){var chart1;$(document).ready(function(){var colors=Highcharts.getOptions().colors,month30=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];month31=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];categories=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],name='电影',data=[{y: 18,color: colors[0],drilldown: {name: categories[0],categories: month31,data: [0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,1,2,1,0,0,0,1,2,0,0,2,2,1,2],color: colors[0]}},{y: 10,color: colors[0],drilldown: {name: categories[1],categories: month30,data: [0,0,3,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,2,0,1,0,0,0,0,0,0],color: colors[1]}},{y: 31,color: colors[0],drilldown: {name: categories[2],categories: month31,data: [0,0,0,1,1,1,0,2,2,4,0,0,3,0,2,0,0,2,3,0,1,0,1,1,2,1,1,2,0,1,0],color: colors[2]}},{y: 17,color: colors[0],drilldown: {name: categories[3],categories: month30,data: [2,3,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,3,0,1,0,0,1,0,1,1,0,0,1,1],color: colors[3]}},{y: 1,color: colors[0],drilldown: {name: categories[4],categories: month31,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],color: colors[4]}},{y: 1,color: colors[0],drilldown: {name: categories[5],categories: month30,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0],color: colors[5]}},{y: 1,color: colors[0],drilldown: {name: categories[6],categories: month31,data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0],color: colors[6]}},{y: 14,color: colors[0],drilldown: {name: categories[7],categories: month31,data: [0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,1,0,0,1,2,2,0,2,1,1,1,0,1,0,0],color: colors[7]}},{y: 7,color: colors[0],drilldown: {name: categories[8],categories: month30,data: [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0],color: colors[8]}},{y: 7,color: colors[0],drilldown: {name: categories[9],categories: month31,data: [0,0,0,0,0,0,0,0,0,2,2,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0],color: colors[9]}},{y: 6,color: colors[0],drilldown: {name: categories[10],categories: month30,data: [0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,2,0,0,0,0,0,0,1,0,0,0,0,0,1],color: colors[10]}},{y: 12,color: colors[0],drilldown: {name: categories[11],categories: month31,data: [1,0,0,0,0,1,1,0,0,0,0,0,0,2,1,0,0,0,0,1,1,0,1,0,0,2,0,0,0,0,1],color: colors[11]}}];function setChart(name,categories,data,color){chart1.xAxis[0].setCategories(categories,false);chart1.series[0].remove(false);chart1.addSeries({name:name,data:data,color:color},false);chart1.redraw()}chart1=new Highcharts.Chart({chart:{renderTo:'chart',type:'column'},title:{text:'2012年你一共看过125部电影'},xAxis:{categories:categories},yAxis:{title:{text:'数量(部)'}},plotOptions:{column:{cursor:'pointer',point:{events:{click:function(){var drilldown=this.drilldown;if(drilldown){setChart(drilldown.name,drilldown.categories,drilldown.data,drilldown.color)}else{setChart(name,categories,data)}}}},dataLabels:{enabled:true,formatter:function(){return this.y}}}},tooltip:{formatter:function(){var point=this.point,s=this.x+': '+this.y+'部<br/>';if(point.drilldown){s+='单击查看'+point.category+'详情'}else{s+='返回月份总览'}return s}},series:[{name:name,data:data,color:colors[0]}],exporting:{enabled:true}})})});</script><div id="chart"style="width:600px;height:400px;margin-left:-30px;"></div><script type="text/javascript">var chart;$(document).ready(function(){chart=new Highcharts.Chart({chart:{renderTo:'pie-chart',plotBackgroundColor:null,plotBorderWidth:null,plotShadow:false},title:{text:'评分分布'},tooltip:{pointFormat:'',percentageDecimals:0},plotOptions:{pie:{allowPointSelect:true,cursor:'pointer',dataLabels:{enabled:true,color:'#000000',connectorColor:'#000000',formatter:function(){return''+this.point.name+': '+Math.round(this.percentage)+' %'}}}},series:[{type:'pie',name:'数量',data:[['无',0],['1星',3],['2星',18],['3星',56],['4星',45],['5星',3]]}]})});</script><div id="pie-chart" style="width:600px;height:400px;margin-left:-30px;"></div><table><tbody><tr><td>

            <a title="寒戰" href="http://movie.douban.com/subject/6890730/" class="nbg">
                <img alt="寒戰" src="http://img3.douban.com/spic/s22872133.jpg">
            </a>
        </td><td>
            <a title="太极2:英雄崛起" href="http://movie.douban.com/subject/10573695/" class="nbg">
                <img alt="太极2:英雄崛起" src="http://img3.douban.com/spic/s22998550.jpg">
            </a>
        </td><td>
            <a title="Looper" href="http://movie.douban.com/subject/3179706/" class="nbg">
                <img alt="Looper" src="http://img3.douban.com/spic/s9017457.jpg">
            </a>
        </td><td>
            <a title="人再囧途之泰囧" href="http://movie.douban.com/subject/10574622/" class="nbg">
                <img alt="人再囧途之泰囧" src="http://img3.douban.com/spic/s19836660.jpg">
            </a>
        </td><td>
            <a title="一路向西" href="http://movie.douban.com/subject/10752040/" class="nbg">
                <img alt="一路向西" src="http://img3.douban.com/spic/s11175042.jpg">
            </a>
        </td><td>
            <a title="Cloud Atlas" href="http://movie.douban.com/subject/3530403/" class="nbg">
                <img alt="Cloud Atlas" src="http://img3.douban.com/spic/s22705883.jpg">
            </a>
        </td><td>
            <a title="Moonrise Kingdom" href="http://movie.douban.com/subject/5360889/" class="nbg">
                <img alt="Moonrise Kingdom" src="http://img5.douban.com/spic/s24447129.jpg">
            </a>
        </td></tr><tr><td>
            <a title="Intouchables" href="http://movie.douban.com/subject/6786002/" class="nbg">
                <img alt="Intouchables" src="http://img3.douban.com/spic/s7024452.jpg">
            </a>
        </td><td>
            <a title="Fantastic Mr. Fox" href="http://movie.douban.com/subject/1759386/" class="nbg">
                <img alt="Fantastic Mr. Fox" src="http://img3.douban.com/spic/s4147888.jpg">
            </a>
        </td><td>
            <a title="女朋友○男朋友" href="http://movie.douban.com/subject/6829652/" class="nbg">
                <img alt="女朋友○男朋友" src="http://img3.douban.com/spic/s10293097.jpg">
            </a>
        </td><td>
            <a title="ももへの手紙" href="http://movie.douban.com/subject/6010171/" class="nbg">
                <img alt="ももへの手紙" src="http://img3.douban.com/spic/s7020827.jpg">
            </a>
        </td><td>
            <a title="써니" href="http://movie.douban.com/subject/4917726/" class="nbg">
                <img alt="써니" src="http://img3.douban.com/spic/s6927566.jpg">
            </a>
        </td><td>
            <a title="パプリカ" href="http://movie.douban.com/subject/1865703/" class="nbg">
                <img alt="パプリカ" src="http://img3.douban.com/spic/s2503561.jpg">
            </a>
        </td><td>
            <a title="Life of Pi" href="http://movie.douban.com/subject/1929463/" class="nbg">
                <img alt="Life of Pi" src="http://img3.douban.com/spic/s11119812.jpg">
            </a>
        </td></tr><tr><td>
            <a title="太极1:从零开始" href="http://movie.douban.com/subject/5996800/" class="nbg">
                <img alt="太极1:从零开始" src="http://img5.douban.com/spic/s11428199.jpg">
            </a>
        </td><td>
            <a title="Abraham Lincoln: Vampire Hunter" href="http://movie.douban.com/subject/4326412/" class="nbg">
                <img alt="Abraham Lincoln: Vampire Hunter" src="http://img3.douban.com/spic/s7024887.jpg">
            </a>
        </td><td>
            <a title="Ted" href="http://movie.douban.com/subject/4807924/" class="nbg">
                <img alt="Ted" src="http://img3.douban.com/spic/s10392260.jpg">
            </a>
        </td><td>
            <a title="铜雀台" href="http://movie.douban.com/subject/6796158/" class="nbg">
                <img alt="铜雀台" src="http://img5.douban.com/spic/s16628869.jpg">
            </a>
        </td><td>
            <a title="The Amazing Spider-Man" href="http://movie.douban.com/subject/2129132/" class="nbg">
                <img alt="The Amazing Spider-Man" src="http://img3.douban.com/spic/s9084762.jpg">
            </a>
        </td><td>
            <a title="喜宴" href="http://movie.douban.com/subject/1303037/" class="nbg">
                <img alt="喜宴" src="http://img3.douban.com/spic/s1316572.jpg">
            </a>
        </td><td>
            <a title="苹果" href="http://movie.douban.com/subject/1966464/" class="nbg">
                <img alt="苹果" src="http://img3.douban.com/spic/s2792571.jpg">
            </a>
        </td></tr><tr><td>
            <a title="El sexo de los ángeles" href="http://movie.douban.com/subject/3148068/" class="nbg">
                <img alt="El sexo de los ángeles" src="http://img3.douban.com/spic/s18566328.jpg">
            </a>
        </td><td>
            <a title="The Expendables 2" href="http://movie.douban.com/subject/6040982/" class="nbg">
                <img alt="The Expendables 2" src="http://img3.douban.com/spic/s10353110.jpg">
            </a>
        </td><td>
            <a title="Madagascar 3: Europe's Most Wanted" href="http://movie.douban.com/subject/3178770/" class="nbg">
                <img alt="Madagascar 3: Europe's Most Wanted" src="http://img3.douban.com/spic/s8966851.jpg">
            </a>
        </td><td>
            <a title="Despicable Me" href="http://movie.douban.com/subject/3287562/" class="nbg">
                <img alt="Despicable Me" src="http://img3.douban.com/spic/s4357597.jpg">
            </a>
        </td><td>
            <a title="Limitless" href="http://movie.douban.com/subject/3041269/" class="nbg">
                <img alt="Limitless" src="http://img3.douban.com/spic/s4643326.jpg">
            </a>
        </td><td>
            <a title="Blitz" href="http://movie.douban.com/subject/3238087/" class="nbg">
                <img alt="Blitz" src="http://img3.douban.com/spic/s6341657.jpg">
            </a>
        </td><td>
            <a title="The Expendables" href="http://movie.douban.com/subject/3279080/" class="nbg">
                <img alt="The Expendables" src="http://img3.douban.com/spic/s4387257.jpg">
            </a>
        </td></tr><tr><td>
            <a title="名探偵コナン 11人目のストライカー" href="http://movie.douban.com/subject/6984051/" class="nbg">
                <img alt="名探偵コナン 11人目のストライカー" src="http://img5.douban.com/spic/s8913299.jpg">
            </a>
        </td><td>
            <a title="The Dark Knight Rises" href="http://movie.douban.com/subject/3395373/" class="nbg">
                <img alt="The Dark Knight Rises" src="http://img3.douban.com/spic/s9127643.jpg">
            </a>
        </td><td>
            <a title="Wrath of the Titans" href="http://movie.douban.com/subject/4824515/" class="nbg">
                <img alt="Wrath of the Titans" src="http://img3.douban.com/spic/s7931698.jpg">
            </a>
        </td><td>
            <a title="搞定岳父大人" href="http://movie.douban.com/subject/10831449/" class="nbg">
                <img alt="搞定岳父大人" src="http://img5.douban.com/spic/s11150619.jpg">
            </a>
        </td><td>
            <a title="听风者" href="http://movie.douban.com/subject/6041191/" class="nbg">
                <img alt="听风者" src="http://img3.douban.com/spic/s11172105.jpg">
            </a>
        </td><td>
            <a title="Safe" href="http://movie.douban.com/subject/5151891/" class="nbg">
                <img alt="Safe" src="http://img3.douban.com/spic/s7050716.jpg">
            </a>
        </td><td>
            <a title="桃姐" href="http://movie.douban.com/subject/5977835/" class="nbg">
                <img alt="桃姐" src="http://img3.douban.com/spic/s8422157.jpg">
            </a>
        </td></tr><tr><td>
            <a title="搜索" href="http://movie.douban.com/subject/6799191/" class="nbg">
                <img alt="搜索" src="http://img3.douban.com/spic/s10339340.jpg">
            </a>
        </td><td>
            <a title="转山" href="http://movie.douban.com/subject/5318669/" class="nbg">
                <img alt="转山" src="http://img3.douban.com/spic/s6981833.jpg">
            </a>
        </td><td>
            <a title="翻滚吧!阿信" href="http://movie.douban.com/subject/5244092/" class="nbg">
                <img alt="翻滚吧!阿信" src="http://img3.douban.com/spic/s6852144.jpg">
            </a>
        </td><td>
            <a title="賽德克·巴萊(下)彩虹橋" href="http://movie.douban.com/subject/6393127/" class="nbg">
                <img alt="賽德克·巴萊(下)彩虹橋" src="http://img3.douban.com/spic/s6807398.jpg">
            </a>
        </td><td>
            <a title="賽德克·巴萊(上)太陽旗" href="http://movie.douban.com/subject/10450409/" class="nbg">
                <img alt="賽德克·巴萊(上)太陽旗" src="http://img5.douban.com/spic/s7048059.jpg">
            </a>
        </td><td>
            <a title="杀生" href="http://movie.douban.com/subject/4176542/" class="nbg">
                <img alt="杀生" src="http://img3.douban.com/spic/s8925423.jpg">
            </a>
        </td><td>
            <a title="武侠" href="http://movie.douban.com/subject/4942776/" class="nbg">
                <img alt="武侠" src="http://img3.douban.com/spic/s6522255.jpg">
            </a>
        </td></tr><tr><td>
            <a title="The Avengers" href="http://movie.douban.com/subject/1866479/" class="nbg">
                <img alt="The Avengers" src="http://img3.douban.com/spic/s8904324.jpg">
            </a>
        </td><td>
            <a title="The Pirates! In an Adventure with Scientists!" href="http://movie.douban.com/subject/3718709/" class="nbg">
                <img alt="The Pirates! In an Adventure with Scientists!" src="http://img3.douban.com/spic/s10275461.jpg">
            </a>
        </td><td>
            <a title="The Hunger Games" href="http://movie.douban.com/subject/3592853/" class="nbg">
                <img alt="The Hunger Games" src="http://img5.douban.com/spic/s7022429.jpg">
            </a>
        </td><td>
            <a title="サムライチャンプルー" href="http://movie.douban.com/subject/1460915/" class="nbg">
                <img alt="サムライチャンプルー" src="http://img3.douban.com/spic/s1641082.jpg">
            </a>
        </td><td>
            <a title="テイルズ オブ ヴェスペリア ~The First Strike~" href="http://movie.douban.com/subject/3649510/" class="nbg">
                <img alt="テイルズ オブ ヴェスペリア ~The First Strike~" src="http://img3.douban.com/spic/s4707827.jpg">
            </a>
        </td><td>
            <a title="コクリコ坂から" href="http://movie.douban.com/subject/5262338/" class="nbg">
                <img alt="コクリコ坂から" src="http://img3.douban.com/spic/s4572007.jpg">
            </a>
        </td><td>
            <a title="The Grey" href="http://movie.douban.com/subject/4319445/" class="nbg">
                <img alt="The Grey" src="http://img3.douban.com/spic/s6970665.jpg">
            </a>
        </td></tr><tr><td>
            <a title="Ronal Barbaren" href="http://movie.douban.com/subject/6015756/" class="nbg">
                <img alt="Ronal Barbaren" src="http://img3.douban.com/spic/s4665483.jpg">
            </a>
        </td><td>
            <a title="Happy Feet Two" href="http://movie.douban.com/subject/3626364/" class="nbg">
                <img alt="Happy Feet Two" src="http://img3.douban.com/spic/s6804097.jpg">
            </a>
        </td><td>
            <a title="劇場版 NARUTO-ナルト- ブラッド・プリズン" href="http://movie.douban.com/subject/5407085/" class="nbg">
                <img alt="劇場版 NARUTO-ナルト- ブラッド・プリズン" src="http://img3.douban.com/spic/s4710258.jpg">
            </a>
        </td><td>
            <a title="House M.D. " href="http://movie.douban.com/subject/3002885/" class="nbg">
                <img alt="House M.D. " src="http://img3.douban.com/spic/s3992362.jpg">
            </a>
        </td><td>
            <a title="House M.D." href="http://movie.douban.com/subject/1442129/" class="nbg">
                <img alt="House M.D." src="http://img3.douban.com/spic/s2411175.jpg">
            </a>
        </td><td>
            <a title="Ausente" href="http://movie.douban.com/subject/5973058/" class="nbg">
                <img alt="Ausente" src="http://img3.douban.com/spic/s4640194.jpg">
            </a>
        </td><td>
            <a title="Shame" href="http://movie.douban.com/subject/5360890/" class="nbg">
                <img alt="Shame" src="http://img3.douban.com/spic/s6980916.jpg">
            </a>
        </td></tr><tr><td>
            <a title="Walk a Mile in My Pradas" href="http://movie.douban.com/subject/5152791/" class="nbg">
                <img alt="Walk a Mile in My Pradas" src="http://img3.douban.com/spic/s7053913.jpg">
            </a>
        </td><td>
            <a title="Killer Elite" href="http://movie.douban.com/subject/3775167/" class="nbg">
                <img alt="Killer Elite" src="http://img3.douban.com/spic/s6565075.jpg">
            </a>
        </td><td>
            <a title="Sherlock Holmes: A Game of Shadows" href="http://movie.douban.com/subject/4051753/" class="nbg">
                <img alt="Sherlock Holmes: A Game of Shadows" src="http://img3.douban.com/spic/s7008774.jpg">
            </a>
        </td><td>
            <a title="I Am Legend" href="http://movie.douban.com/subject/1820156/" class="nbg">
                <img alt="I Am Legend" src="http://img3.douban.com/spic/s2551520.jpg">
            </a>
        </td><td>
            <a title="Mission: Impossible - Ghost Protocol" href="http://movie.douban.com/subject/3068206/" class="nbg">
                <img alt="Mission: Impossible - Ghost Protocol" src="http://img3.douban.com/spic/s6975693.jpg">
            </a>
        </td><td>
            <a title="We Bought a Zoo" href="http://movie.douban.com/subject/3578925/" class="nbg">
                <img alt="We Bought a Zoo" src="http://img3.douban.com/spic/s6982855.jpg">
            </a>
        </td><td>
            <a title="とある飛空士への追憶" href="http://movie.douban.com/subject/5040981/" class="nbg">
                <img alt="とある飛空士への追憶" src="http://img3.douban.com/spic/s6807521.jpg">
            </a>
        </td></tr><tr><td>
            <a title="Eating Out 5: The Open Weekend" href="http://movie.douban.com/subject/6536293/" class="nbg">
                <img alt="Eating Out 5: The Open Weekend" src="http://img3.douban.com/spic/s6927692.jpg">
            </a>
        </td><td>
            <a title="ぬらりひょんの孫" href="http://movie.douban.com/subject/4176576/" class="nbg">
                <img alt="ぬらりひょんの孫" src="http://img3.douban.com/spic/s4403223.jpg">
            </a>
        </td><td>
            <a title="Les petits mouchoirs" href="http://movie.douban.com/subject/3742987/" class="nbg">
                <img alt="Les petits mouchoirs" src="http://img3.douban.com/spic/s4505808.jpg">
            </a>
        </td><td>
            <a title="ぬらりひょんの孫 千年魔京" href="http://movie.douban.com/subject/5413796/" class="nbg">
                <img alt="ぬらりひょんの孫 千年魔京" src="http://img3.douban.com/spic/s6643081.jpg">
            </a>
        </td><td>
            <a title="The Adventures of Tintin: The Secret of the Unicorn" href="http://movie.douban.com/subject/2028669/" class="nbg">
                <img alt="The Adventures of Tintin: The Secret of the Unicorn" src="http://img3.douban.com/spic/s6978643.jpg">
            </a>
        </td><td>
            <a title="うさぎドロップ" href="http://movie.douban.com/subject/4935011/" class="nbg">
                <img alt="うさぎドロップ" src="http://img3.douban.com/spic/s4643062.jpg">
            </a>
        </td><td>
            <a title="The Fluffer" href="http://movie.douban.com/subject/1305347/" class="nbg">
                <img alt="The Fluffer" src="http://img3.douban.com/spic/s1923502.jpg">
            </a>
        </td></tr><tr><td>
            <a title="Gone, But Not Forgotten" href="http://movie.douban.com/subject/1449359/" class="nbg">
                <img alt="Gone, But Not Forgotten" src="http://img3.douban.com/spic/s1636723.jpg">
            </a>
        </td><td>
            <a title="Longhorns" href="http://movie.douban.com/subject/6810711/" class="nbg">
                <img alt="Longhorns" src="http://img3.douban.com/spic/s7016538.jpg">
            </a>
        </td><td>
            <a title="The Cost of Love" href="http://movie.douban.com/subject/5157472/" class="nbg">
                <img alt="The Cost of Love" src="http://img3.douban.com/spic/s6975262.jpg">
            </a>
        </td><td>
            <a title="I Want to Get Married" href="http://movie.douban.com/subject/7061180/" class="nbg">
                <img alt="I Want to Get Married" src="http://img3.douban.com/spic/s7016530.jpg">
            </a>
        </td><td>
            <a title="Clapham Junction" href="http://movie.douban.com/subject/2238297/" class="nbg">
                <img alt="Clapham Junction" src="http://img3.douban.com/spic/s3123027.jpg">
            </a>
        </td><td>
            <a title="The Artist" href="http://movie.douban.com/subject/6097775/" class="nbg">
                <img alt="The Artist" src="http://img3.douban.com/spic/s6879372.jpg">
            </a>
        </td><td>
            <a title="Interview with the Vampire: The Vampire Chronicles" href="http://movie.douban.com/subject/1299327/" class="nbg">
                <img alt="Interview with the Vampire: The Vampire Chronicles" src="http://img3.douban.com/spic/s1325497.jpg">
            </a>
        </td></tr><tr><td>
            <a title="The Help" href="http://movie.douban.com/subject/3792848/" class="nbg">
                <img alt="The Help" src="http://img3.douban.com/spic/s6852995.jpg">
            </a>
        </td><td>
            <a title="The Lord of the Rings: The Fellowship of the Ring" href="http://movie.douban.com/subject/1291571/" class="nbg">
                <img alt="The Lord of the Rings: The Fellowship of the Ring" src="http://img3.douban.com/spic/s1309384.jpg">
            </a>
        </td><td>
            <a title="Toast" href="http://movie.douban.com/subject/4904026/" class="nbg">
                <img alt="Toast" src="http://img3.douban.com/spic/s4631698.jpg">
            </a>
        </td><td>
            <a title="The Sixth Sense" href="http://movie.douban.com/subject/1297630/" class="nbg">
                <img alt="The Sixth Sense" src="http://img3.douban.com/spic/s1426063.jpg">
            </a>
        </td><td>
            <a title="蛍火の杜へ" href="http://movie.douban.com/subject/5989818/" class="nbg">
                <img alt="蛍火の杜へ" src="http://img5.douban.com/spic/s6518209.jpg">
            </a>
        </td><td>
            <a title="Dragons: Gift of the Night Fury" href="http://movie.douban.com/subject/6985986/" class="nbg">
                <img alt="Dragons: Gift of the Night Fury" src="http://img3.douban.com/spic/s6999990.jpg">
            </a>
        </td><td>
            <a title="夏目友人帐 第二季" href="http://movie.douban.com/subject/3284269/" class="nbg">
                <img alt="夏目友人帐 第二季" src="http://img5.douban.com/spic/s3704159.jpg">
            </a>
        </td></tr><tr><td>
            <a title="夏目友人帳 参" href="http://movie.douban.com/subject/5967223/" class="nbg">
                <img alt="夏目友人帳 参" src="http://img3.douban.com/spic/s4709115.jpg">
            </a>
        </td><td>
            <a title="夏目友人帳" href="http://movie.douban.com/subject/3060542/" class="nbg">
                <img alt="夏目友人帳" src="http://img3.douban.com/spic/s3166471.jpg">
            </a>
        </td><td>
            <a title="Cover boy: L'ultima rivoluzione" href="http://movie.douban.com/subject/3242341/" class="nbg">
                <img alt="Cover boy: L'ultima rivoluzione" src="http://img3.douban.com/spic/s3292261.jpg">
            </a>
        </td><td>
            <a title="Отец и сын" href="http://movie.douban.com/subject/1307125/" class="nbg">
                <img alt="Отец и сын" src="http://img3.douban.com/spic/s2679225.jpg">
            </a>
        </td><td>
            <a title="Real Fiction" href="http://movie.douban.com/subject/5177633/" class="nbg">
                <img alt="Real Fiction" src="http://img3.douban.com/spic/s6940056.jpg">
            </a>
        </td><td>
            <a title="Cibrâil - Eine Liebe in Berlin" href="http://movie.douban.com/subject/6725030/" class="nbg">
                <img alt="Cibrâil - Eine Liebe in Berlin" src="http://img3.douban.com/spic/s6776248.jpg">
            </a>
        </td><td>
            <a title="Drive" href="http://movie.douban.com/subject/2010972/" class="nbg">
                <img alt="Drive" src="http://img3.douban.com/spic/s6857740.jpg">
            </a>
        </td></tr><tr><td>
            <a title="Lilies - Les feluettes" href="http://movie.douban.com/subject/1292485/" class="nbg">
                <img alt="Lilies - Les feluettes" src="http://img3.douban.com/spic/s3053852.jpg">
            </a>
        </td><td>
            <a title="Testosterone" href="http://movie.douban.com/subject/1938082/" class="nbg">
                <img alt="Testosterone" src="http://img5.douban.com/spic/s4592609.jpg">
            </a>
        </td><td>
            <a title="Tinker Tailor Soldier Spy" href="http://movie.douban.com/subject/3338851/" class="nbg">
                <img alt="Tinker Tailor Soldier Spy" src="http://img3.douban.com/spic/s6999340.jpg">
            </a>
        </td><td>
            <a title="Moneyball" href="http://movie.douban.com/subject/3023164/" class="nbg">
                <img alt="Moneyball" src="http://img5.douban.com/spic/s6786059.jpg">
            </a>
        </td><td>
            <a title="جدایی نادر از سیمین" href="http://movie.douban.com/subject/5964718/" class="nbg">
                <img alt="جدایی نادر از سیمین" src="http://img3.douban.com/spic/s7006217.jpg">
            </a>
        </td><td>
            <a title="Conan the Barbarian" href="http://movie.douban.com/subject/2298964/" class="nbg">
                <img alt="Conan the Barbarian" src="http://img5.douban.com/spic/s6656329.jpg">
            </a>
        </td><td>
            <a title="The Three Musketeers" href="http://movie.douban.com/subject/4035906/" class="nbg">
                <img alt="The Three Musketeers" src="http://img3.douban.com/spic/s6809800.jpg">
            </a>
        </td></tr><tr><td>
            <a title="又见阿郎" href="http://movie.douban.com/subject/4139886/" class="nbg">
                <img alt="又见阿郎" src="http://img3.douban.com/spic/s4082642.jpg">
            </a>
        </td><td>
            <a title="Real Steel" href="http://movie.douban.com/subject/1972729/" class="nbg">
                <img alt="Real Steel" src="http://img3.douban.com/spic/s6392915.jpg">
            </a>
        </td><td>
            <a title="志明與春嬌" href="http://movie.douban.com/subject/4305436/" class="nbg">
                <img alt="志明與春嬌" src="http://img3.douban.com/spic/s4197122.jpg">
            </a>
        </td><td>
            <a title="Beginners" href="http://movie.douban.com/subject/4109909/" class="nbg">
                <img alt="Beginners" src="http://img5.douban.com/spic/s4662019.jpg">
            </a>
        </td><td>
            <a title="Puss in Boots" href="http://movie.douban.com/subject/2028585/" class="nbg">
                <img alt="Puss in Boots" src="http://img3.douban.com/spic/s6929818.jpg">
            </a>
        </td><td>
            <a title="再見阿郎" href="http://movie.douban.com/subject/3123956/" class="nbg">
                <img alt="再見阿郎" src="http://img3.douban.com/spic/s3153376.jpg">
            </a>
        </td><td>
            <a title="Mission: Impossible II" href="http://movie.douban.com/subject/1298525/" class="nbg">
                <img alt="Mission: Impossible II" src="http://img3.douban.com/spic/s1812241.jpg">
            </a>
        </td></tr><tr><td>
            <a title="Mission: Impossible III" href="http://movie.douban.com/subject/1401533/" class="nbg">
                <img alt="Mission: Impossible III" src="http://img3.douban.com/spic/s1811024.jpg">
            </a>
        </td><td>
            <a title="Mission: Impossible" href="http://movie.douban.com/subject/1292484/" class="nbg">
                <img alt="Mission: Impossible" src="http://img3.douban.com/spic/s1812242.jpg">
            </a>
        </td><td>
            <a title="Harry Potter and the Deathly Hallows: Part 2" href="http://movie.douban.com/subject/3011235/" class="nbg">
                <img alt="Harry Potter and the Deathly Hallows: Part 2" src="http://img3.douban.com/spic/s6776264.jpg">
            </a>
        </td><td>
            <a title="Harry Potter and the Deathly Hallows: Part 1" href="http://movie.douban.com/subject/2051007/" class="nbg">
                <img alt="Harry Potter and the Deathly Hallows: Part 1" src="http://img3.douban.com/spic/s4494638.jpg">
            </a>
        </td><td>
            <a title="Harry Potter and the Prisoner of Azkaban" href="http://movie.douban.com/subject/1291544/" class="nbg">
                <img alt="Harry Potter and the Prisoner of Azkaban" src="http://img3.douban.com/spic/s1309355.jpg">
            </a>
        </td><td>
            <a title="Harry Potter and the Goblet of Fire" href="http://movie.douban.com/subject/1309055/" class="nbg">
                <img alt="Harry Potter and the Goblet of Fire" src="http://img3.douban.com/spic/s1456365.jpg">
            </a>
        </td><td>
            <a title="Harry Potter and the Order of the Phoenix" href="http://movie.douban.com/subject/1457217/" class="nbg">
                <img alt="Harry Potter and the Order of the Phoenix" src="http://img3.douban.com/spic/s2378234.jpg">
            </a>
        </td></tr><tr><td>
            <a title="龙门飞甲" href="http://movie.douban.com/subject/4896304/" class="nbg">
                <img alt="龙门飞甲" src="http://img3.douban.com/spic/s7001357.jpg">
            </a>
        </td><td>
            <a title="Harry Potter and the Chamber of Secrets" href="http://movie.douban.com/subject/1296996/" class="nbg">
                <img alt="Harry Potter and the Chamber of Secrets" src="http://img3.douban.com/spic/s3252197.jpg">
            </a>
        </td><td>
            <a title="Heat" href="http://movie.douban.com/subject/1295686/" class="nbg">
                <img alt="Heat" src="http://img3.douban.com/spic/s1458637.jpg">
            </a>
        </td><td>
            <a title="Harry Potter and the Sorcerer's Stone" href="http://movie.douban.com/subject/1295038/" class="nbg">
                <img alt="Harry Potter and the Sorcerer's Stone" src="http://img3.douban.com/spic/s2659036.jpg">
            </a>
        </td><td>
            <a title="步步惊心" href="http://movie.douban.com/subject/5384548/" class="nbg">
                <img alt="步步惊心" src="http://img3.douban.com/spic/s6966016.jpg">
            </a>
        </td><td>
            <a title="Sherlock " href="http://movie.douban.com/subject/3986493/" class="nbg">
                <img alt="Sherlock " src="http://img3.douban.com/spic/s4436692.jpg">
            </a>
        </td><td>
            <a title="Sherlock S01E00 Pilot" href="http://movie.douban.com/subject/5258017/" class="nbg">
                <img alt="Sherlock S01E00 Pilot" src="http://img5.douban.com/spic/s4615759.jpg">
            </a>
        </td></tr><tr><td>
            <a title="Front of the Class" href="http://movie.douban.com/subject/4798888/" class="nbg">
                <img alt="Front of the Class" src="http://img3.douban.com/spic/s4323737.jpg">
            </a>
        </td><td>
            <a title="Taare Zameen Par" href="http://movie.douban.com/subject/2363506/" class="nbg">
                <img alt="Taare Zameen Par" src="http://img3.douban.com/spic/s4543761.jpg">
            </a>
        </td><td>
            <a title="金陵十三钗" href="http://movie.douban.com/subject/3649049/" class="nbg">
                <img alt="金陵十三钗" src="http://img3.douban.com/spic/s7008556.jpg">
            </a>
        </td><td>
            <a title="喜羊羊与灰太狼之开心闯龙年" href="http://movie.douban.com/subject/7056398/" class="nbg">
                <img alt="喜羊羊与灰太狼之开心闯龙年" src="http://img3.douban.com/spic/s7032465.jpg">
            </a>
        </td><td>
            <a title="Minority Report" href="http://movie.douban.com/subject/1297689/" class="nbg">
                <img alt="Minority Report" src="http://img5.douban.com/spic/s2657579.jpg">
            </a>
        </td><td>
            <a title="The Boy in the Striped Pajamas" href="http://movie.douban.com/subject/3008247/" class="nbg">
                <img alt="The Boy in the Striped Pajamas" src="http://img3.douban.com/spic/s3227658.jpg">
            </a>