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

2008年10月06日 | 264 次浏览 | JavaScript  

以前写的代码，写得比较简单。这里贴一下，我觉得可以作为演示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. }

评论

Comment RSS TrackBack URI

相关推荐：

发表评论

更多文章

最受欢迎

评论最多