视频网站播放列表的简单实现

以前写的代码,写得比较简单。这里贴一下,我觉得可以作为演示Javascript操作cookie用:)

效果看这里,完整代码(代码中的CookieManager抄袭自O’Reilly的《JavaScript & DHTML Cookbook》,Utility.each函数抄袭自JQuery中的each)在这里。下面是关键的代码部分:

  1. var PlayList = {
  2.     cookieName:'PlayListIds',
  3.     //保存要播放的视频id列表
  4.     ids:[],
  5.     //过期时间 单位秒
  6.     expires:30,
  7.     //读取cookie保存的播放列表信息 播放id保存格式为1232.1221.213.123  以.间隔
  8.     read:function(){
  9.         var cookieString = CookieManager.get(this.cookieName);
  10.         return cookieString != '' ? cookieString.split('.') : [];
  11.     },
  12.     //获取视频id在数组中的索引
  13.     indexOf:function(id){
  14.         for(var i =0 ; i < this.ids.length; i++)
  15.             if(this.ids[i] == id.toString())
  16.                 return i;
  17.         return -1;
  18.     },
  19.     //更新cookie信息
  20.     update:function(){
  21.         CookieManager.set(
  22.             this.cookieName,
  23.             this.ids.join('.'),
  24.             CookieManager.getExpiresDate(0,0,this.expires),
  25.             '/',
  26.             '.panweizeng.com'
  27.         );
  28.     },
  29.     //增加视频
  30.     add:function(id){
  31.         if(typeof id != "number" || this.indexOf(id) != -1) return;
  32.         this.ids.push(id.toString());
  33.         this.update();
  34.     },
  35.     //移除视频
  36.     remove:function(id){
  37.         var index = -1;
  38.         if(typeof id != "number" || (index = this.indexOf(id)) == -1) return;
  39.         this.ids.splice(index,1);
  40.         this.update();
  41.     },
  42.     //清空列表
  43.     clear:function(){
  44.         CookieManager.clear();
  45.         var pItem = null,pItemSel = null;
  46.         for(var i = 0; i < this.ids.length; i++){
  47.             if( (pItemSel = $('playlist-item-sel-'+this.ids[i])) != null
  48.                 && (pItem = $('playlist-item-'+this.ids[i])) != null )
  49.             {
  50.                 pItemSel.className = "unselected";
  51.                 pItemSel.title = "添加到点播单";
  52.                 pItem.getElementsByTagName("img")[0].style.border = "5px solid white";
  53.             }
  54.         }
  55.     },
  56.     //渲染
  57.     renderSelected:function(){
  58.         var pItem = null,pItemSel = null;
  59.         for(var i = 0; i < this.ids.length; i++){
  60.             if( (pItemSel = $('playlist-item-sel-'+this.ids[i])) != null
  61.                 && (pItem = $('playlist-item-'+this.ids[i])) != null )
  62.             {
  63.                 pItemSel.className = "selected";
  64.                 pItemSel.title = "从点播单移除";
  65.                 pItem.getElementsByTagName("img")[0].style.border = "5px solid yellow";
  66.             }
  67.         }
  68.     },
  69.     //处理点击
  70.     toggle:function(el){
  71.         if(el.className == 'unselected'){
  72.             el.className = 'selected';
  73.             el.title = "从点播单移除";
  74.             el.parentNode.getElementsByTagName("img")[0].style.border = "5px solid yellow";
  75.             this.add(parseInt(el.getAttribute('sid')));
  76.         } else {
  77.             el.className = 'unselected';
  78.             el.title = "添加到点播单";
  79.             el.parentNode.getElementsByTagName("img")[0].style.border = "5px solid white";
  80.             this.remove(parseInt(el.getAttribute('sid')));
  81.         }
  82.     },
  83.     //绑定事件
  84.     attachEvent:function(){
  85.         var _ = this;
  86.         var els = Utility.getElementsByClassName("playlist","a","unselected");
  87.         els = els.concat(Utility.getElementsByClassName("playlist","a","selected"));
  88.         Utility.each(els,function(i,el){
  89.             Utility.bind(el,'click',_.toggle,_,el)
  90.         })
  91.     },
  92.     //初始化
  93.     init:function(){
  94.         this.ids = this.read();
  95.         this.renderSelected();
  96.         this.attachEvent();
  97.     }
  98. }
[ 分类: JavaScript ] 由 Pan 发表于 August 24, 2008 11:35 pm  固定链接  评论( 0 )

程序员也做饭 | 西红柿凉面

1.白水煮开,放入面条煮熟,过一遍冷水放入碗中
2.青椒、西红柿、姜、蒜切得碎一些,放入锅中翻炒成泥状后浇在面条上即成

非常简单,味道还不错,热量较低,非常适合做为晚餐。如有必要可以添一两种青菜,不过我一般青菜和黄瓜都是蘸酱吃。

[ 分类: 个人动态, 学习 ] 由 Pan 发表于 10:41 pm  固定链接  评论( 2 )

近期学习成果

在上班休息时间断断续续看完了《ppk谈Javascript》《精通Javascript》。这两本书都是不错的译作,前者主要面向初级开发者,后者则主要面向需要进阶的同学。从这两本书中学习了很多以前我忽略或者没掌握的基本知识。

Peter-Paul Koch主修古希腊罗马史,所以我觉得ppk一书写得最好的是Javascript历史部分,还有事件那一章也是非常精彩。ppk书中提出的一些观点还有待斟酌,淘宝UED团队的译者们都一一做了批注,所以强烈推荐大家去买中译本吧。

JQuery之父John Resig写的《精通Javascript》主要讲述现代Javascript程序设计,尤其是前面三章让人手不释卷。书中对于DOM、事件和CSS部分写得也非常好,绝对是专家级的讲解。原书中的校对错误不少,还好译者安安在网上准备了一份勘误表

[ 分类: 学习 ] 由 Pan 发表于 8:44 pm  固定链接  评论( 0 )

当归党参乌鸡汤

食材:乌鸡700克,当归、党参和枸杞各一把,姜一块。当归和党参可在中药店购得,超市一般是没有的。
做法:
1.大锅放水煮沸,将乌鸡放入烫出血沫,十分钟后捞出用清水洗净;
2.将乌鸡切块,把所有的辅料放入炖锅小火煲四个小时以上,出锅前放少许盐就可。

此汤可作为滋补之用,男女均可。由于加了当归和党参这两味药材,药味浓厚,微腻微甜,我个人还是比较喜欢清淡一点的汤。

[ 分类: 个人动态, 学习 ] 由 Pan 发表于 August 17, 2008 11:35 pm  固定链接  评论( 0 )

枸杞玉米排骨汤的做法

食材:排骨一斤,玉米棒两个,枸杞一把,大葱一根,姜一块,八角五颗,王守义炖肉料一包。肋排在华联超市买的,切得非常整齐好看。玉米棒上的玉米粒掰出放在碗里,剩下的棒子切成若干段备用。

做法:

1.大锅放水煮沸,将排骨放入烫出血沫,五分钟后捞出用清水洗净。

2.将排骨在炖锅中整齐摆好,放入空玉米棒、枸杞、大葱、姜、八角、炖肉料。

3.炖三小时后放入玉米粒,三十分钟后熄火。

成汤为浅黄色,清淡带有玉米的香甜。

经验教训:由于北方玉米较老较硬,下锅时间应提前。

以上为潘式秘制,如有雷同,纯属巧合。

另附东北菜大丰收的简单做法
小黄瓜、大葱、荷兰青瓜洗净切段。大酱用酱油和芥末搅拌代替。大葱沾芥末,爽上加爽,嘿嘿。

[ 分类: 个人动态, 学习 ] 由 Pan 发表于 August 13, 2008 7:22 pm  固定链接  评论( 3 )