cocos2d-html5版日历组件
根据一as3版本给改编成成了js版的。as3版本的地址: http://download.csdn.net/detail/fengye513/2722289
胜利项目做的差不多了,由于项目用的是c++,并没有动态更新逻辑的需求,所以也就没有写什么js或者lua脚本,全部c++,涉及到付费或者分享之类特殊处理,objc和java还是写了不少。话不多说,现在游戏里增加了一个会不定期更新的活动模块,逻辑部分和UI部分都会实事改动,一开始想要写lua,但是由于引擎版本差异,引擎代码被改动过等原因,放弃了lua binding的方式,于是就用到了webView这个东东,直接嵌入页面到游戏中,搞定了objc与js互调,java与js互调之后,利用cocosx-html5引擎开些了。
活动嘛,少不了签到,签到,肯定是在日历上签咯。
共三个类,类名没怎么改,还是用as那老兄的命名
DayObject :日历上每一天的数据
DateShape : 日历上每一天的视图
SuperCalendar : 日历容器
new一个SuperCalendar并addChild到你想要它出现的地方,然后调用setData()方法传递年,月,日,就可以了,
支持跳月,跳年就没写了,如果你需要的话可以看看原本的as代码里有。
上代码:
1 /** 2 * @anthor JiaDing 3 * 4 */ 5 6 var DayObject = cc.Class.extend({ 7 8 innerText:null,//几号 9 isToady:false,//是否是当天 10 isMark:false,//是否签到 11 12 13 init:function () 14 { 15 16 17 return true; 18 19 } 20 21 22 }); 23 24 DayObject.create = function() 25 { 26 var obj = new DayObject(); 27 if(obj && obj.init()) 28 { 29 return obj; 30 } 31 return null; 32 };
1 /** 2 * @anthor JiaDing 3 * 4 */ 5 6 var DateShape = cc.Sprite.extend({ 7 8 _label:null, 9 _lis:null, 10 _Obj:null, 11 12 init:function (val) 13 { 14 var ready = false; 15 if (this._super()) 16 { 17 // winSize = cc.Director.getInstance().getWinSize(); 18 19 this._lis = []; 20 this._Obj = val; 21 22 var markInfo = null; 23 if(this._Obj.isMark) 24 { 25 markInfo = "(已签)"; 26 } 27 else 28 { 29 markInfo = "(未签)"; 30 } 31 this._label = cc.LabelTTF.create(this._Obj.innerText+markInfo, "Arial", 25); 32 33 34 if(this._Obj.isToady) 35 { 36 this._label.setColor(cc.c3b(255,0,0)); 37 } 38 else 39 { 40 this._label.setColor(cc.c3b(255,255,255)); 41 } 42 43 this.addChild(this._label); 44 45 46 ready = true; 47 } 48 return ready; 49 50 } 51 52 53 }); 54 55 DateShape.create = function(val) 56 { 57 var shape = new DateShape(); 58 if(shape && shape.init(val)) 59 { 60 return shape; 61 } 62 return null; 63 }; 64 65 DateShape.prototype.remove = function() 66 { 67 this.removeAllChildren(true); 68 this._label = null; 69 this._lis = null; 70 71 }
1 /** 2 * @anthor JiaDing 3 * 4 */ 5 6 var SuperCalendar = cc.Layer.extend({ 7 8 daysMonth:null, 9 thisYear:0, 10 thisMonth:0, 11 thisDay:0, 12 day:null, 13 dayObj:null, 14 dateSprite:null, 15 16 inputDate:null, 17 today:null, 18 todayTitleInfo:null, 19 20 21 init:function () 22 { 23 var bRet = false; 24 if (this._super()) 25 { 26 27 this.daysMonth = [31,28,31,30,31,30,31,31,30,31,30,31];//正常的月份日期 28 this.day = new Array(42); 29 this.dayObj = new Array(42); 30 31 bRet = true; 32 } 33 return bRet; 34 35 }, 36 setData:function(y,m,d) 37 { 38 this.thisYear = y; 39 this.thisMonth = m; 40 this.thisDay = d; 41 this.today = this.thisYear + "-" + this.thisMonth + "-" + this.thisDay; 42 this.updateCalendar(); 43 }, 44 updateCalendar:function () 45 { 46 if(this.dateSprite != null) 47 { 48 this.dateSprite.removeAllChildren(true); 49 this.removeChild(this.dateSprite); 50 this.dateSprite = null; 51 } 52 var iRemove=0; 53 // document.write(this.dateSprite); 54 if(this.dateSprite == null) 55 { 56 this.dateSprite = cc.Sprite.create(); 57 this.addChild(this.dateSprite); 58 } 59 60 var y = this.thisYear; 61 var m = this.thisMonth; 62 var d = this.thisDay; 63 64 if(!(y <= 9999 && y >= 1000 && m > 0 && m < 13 && d > 0)){ 65 //日期初始化 66 this.thisYear = 2013 67 this.thisMonth = 7; 68 this.thisDay = 10; 69 } 70 71 this.todayTitleInfo = this.thisYear + "年 " + this.thisMonth + "月"; 72 73 y = this.thisYear; 74 m = this.thisMonth; 75 d = this.thisDay; 76 this.daysMonth[1] = (0 == y%4 &&(y%100!=0 || y%400==0)) ? 29:28; 77 var w = new Date(y,m-1,1).getDay(); 78 79 var prevDays = m==1? this.daysMonth[11] : this.daysMonth[m-2]; 80 var i; 81 for(i=(w-1);i >= 0;i--){ 82 this.day[i] = y + "-" + (m-1) + "-" + prevDays; 83 if(m == 1){ 84 this.day[i] = (y-1) + "-" + 12 + "-" + prevDays; 85 } 86 prevDays--; 87 } 88 for(i=1;i <= this.daysMonth[m-1];i++){ 89 this.day[i+w-1] = y + "-" + m + "-" + i; 90 } 91 for(i=1;i<42-w-this.daysMonth[m-1]+1;i++){ 92 this.day[this.daysMonth[m-1]+w-1+i] = y + "-" + (m+1) + "-" + i; 93 if(m==12){ 94 this.day[this.daysMonth[m-1]+w-1+i] = (y+1) + "-" + 1 + "-" + i; 95 } 96 } 97 98 for(i=0;i<42;i++) 99 { 100 var a = this.day[i].split("-"); 101 this.dayObj[i] = DayObject.create(); 102 this.dayObj[i].innerText = a[2]; 103 this.dayObj[i].isToady = false; 104 105 //非本月份,不显示日期 106 if(i < w) 107 { 108 continue; 109 } 110 if(i >= w+this.daysMonth[m-1]) 111 { 112 continue; 113 } 114 115 //今天日期 116 if(this.day[i] == this.today) 117 { 118 this.dayObj[i].isToady = true; 119 } 120 121 var dateShape = DateShape.create(this.dayObj[i]); 122 dateShape.setPositionX((i % 7) * 115); 123 //cocos2d的世界里越往下y越小,所以要(6-i) 124 dateShape.setPositionY( Math.floor((6-i) / 7) * 40 ); 125 126 this.dateSprite.addChild(dateShape); 127 128 } 129 }, 130 jumpToPrevMonth:function() 131 { 132 this.thisDay = 1; 133 if(this.thisMonth == 1) 134 { 135 this.thisYear--; 136 this.thisMonth = 13; 137 } 138 this.thisMonth--; 139 this.updateCalendar(); 140 }, 141 jumpToNextMonth:function() 142 { 143 this.thisDay = 1; 144 if(this.thisMonth == 12) 145 { 146 this.thisYear++; 147 this.thisMonth = 0; 148 } 149 this.thisMonth++; 150 this.updateCalendar(); 151 }, 152 jumpToToday:function() 153 { 154 this.thisYear = 2013; 155 this.thisMonth = 7; 156 this.thisDay = 10; 157 this.today = this.thisYear + "-" + this.thisMonth + "-" + this.thisDay; //今天("yyyy-dd-mm") 158 this.updateCalendar(); 159 } 160 }); 161 162 SuperCalendar.create = function() 163 { 164 var layer = new SuperCalendar(); 165 if(layer && layer.init()) 166 { 167 return layer; 168 } 169 return null; 170 };