由于咱们项目中的签到：主要是为了让用户通过签到次数，来完成任务，获得相应的奖励！
上图：
Sign.js代码如下：
1 //签到任务 2 var Sign = { 3 Data: { 4 SignMonthDetailUrl: '/UserCenter/SignMonthDetail', //签到明细查询地址 5 SignUrl: '/UserCenter/Sign/', //签到地址 6 CurentShowDate: null, //当前显示的月份 7 objSignButton: null, //签到对象 8 objSignContainer: null, //签到显示的对象 9 PreMonthSelector: '.PreMonth', 10 NextMonthSelector: '.NextMonth', 11 MonthDataDetail: {}, //每月明细 12 timer: null, 13 ajax_status: false 14 }, 15 CreateDOM: function () { 16 var hoverID = "divSignDetail_" + parseInt(Math.random() * 1000); 17 this.Data.objSignContainer = "#" + hoverID; 18 var str_yearmonth = new Date().getFullYear() + "年" + (new Date().getMonth() + 1) + "月"; 19 this.Data.CurentShowDate = new Date(); 20 var ary = [' ', ' ', ' ', ' ']; 21 $(this.Data.objSignButton).closest("div").prepend(ary.join('')); 22 //－－－生成当前月的详细信息 23 this.ShowMonthDetail(new Date().getFullYear(), new Date().getMonth() + 1); 24 25 }, 26 ShowMonthDetail: function (Year, Month) { 27 var _this = this; 28 var html = _this.GetMonthDetailHTML(Year, Month); 29 if (html !== undefined && html !== null) { 30 _this.ShowMonthDetailHTML(Year, Month, html); 31 return false; 32 } 33 var data = { Year: Year, Month: Month }; 34 //--------------------------------------- 35 //显示指定月信息 36 _this.Data.ajax_status = true; 37 $.ajax({ 38 url: _this.Data.SignMonthDetailUrl, 39 data: data, 40 type: 'POST', 41 dataType: 'json', 42 success: function (data) { 43 if (data !== 0) { 44 _this.CreateMonthDOM(Year, Month, data); 45 } else { 46 alert("年月参数错误"); 47 } 48 }, error: function () { 49 alert("加载数据失败"); 50 } 51 }); 52 }, 53 CreateMonthDOM: function (Year, Month, data) { 54 //生成指定月的明细 55 var _this = this; 56 var ary = [' | 日 | 一 | 二 | 三 | 四 | 五 | 六 |
| '); 63 } 64 var dayNum = new Date(Year, Month, 0).getDate(); 65 var curDate = new Date(); 66 var curDayNum = -1; 67 if (curDate.getFullYear() === dtFirstDay.getFullYear() && curDate.getMonth() == dtFirstDay.getMonth()) { 68 curDayNum = curDate.getDate(); 69 } 70 var aryflag = _this.ToMonthAry(data); 71 var strClass = ""; 72 for (var i = 1; i <= dayNum; ++i) { 73 if (weeknum == 0) { 74 ary[ary.length] = ' | ||||||
| ' + i + ' | '; 79 } else { //没有签到 80 if (curDayNum === i) { 81 strClass = "td_bg_hover"; 82 } else { strClass = "td_bg_none"; } 83 ary[ary.length] = '' + i + ' | '; 84 } 85 if (weeknum == 6) { 86 ary[ary.length] = '|||||
| '); 94 ary[ary.length] = ' |
'; 99 _this.Data.ajax_status = false;100 var html = ary.join('');101 _this.SetMonthDetailHTML(Year, Month, html);102 _this.ShowMonthDetailHTML(Year, Month, html);103 },104 GetMonthDetailHTML: function (Year, Month) {105 return this.Data.MonthDataDetail[Year + '.' + Month];106 },107 SetMonthDetailHTML: function (Year, Month, html) {108 this.Data.MonthDataDetail[Year + '.' + Month] = html;109 },110 ShowMonthDetailHTML: function (Year, Month, Html) {111 var _this = this;112 $(_this.Data.objSignContainer).find(".timer_sheet").html(Html);113 $(_this.Data.objSignContainer).find(".qd_complet_timer").html(Year + "年" + Month + "月");114 _this.Data.CurentShowDate = new Date(Year, Month - 1, 1);115 },116 ToMonthAry: function (data) {117 var ary_list = new Array(32);118 for (var i = 0, len = data.length; i < len; ++i) {119 ary_list[data[i]] = true;120 }121 return ary_list;122 },123 BindSignEvent: function () {124 //绑定签到事件125 var _this = this;126 //查看127 $(_this.Data.objSignButton).click(function () {128 //第一次点击签到129 if (_this.Data.objSignContainer === null) {130 _this.SignInit();131 } else {132 clearTimeout(_this.Data.timer);133 $(_this.Data.objSignContainer).fadeIn('fast');134 }135 });136 },137 SignAction: function (obj) {138 //签到行为139 var _this = this;140 //判断是否需要签到141 var issign = $(obj).is(".active");142 if (issign === true) {143 if ($(obj).data("ajax") === "1") {144 return false;145 }146 $(obj).data("ajax", "1");147 $.getJSON(_this.Data.SignUrl, function (data) {148 $(obj).removeData("ajax");149 if (data.code === 1 && data.year > 0 && data.month > 0) { //签到成功150 $(obj).prop("class", "");151 $(_this.Data.objSignContainer).find("span").show();152 _this.SetMonthDetailHTML(data.year, data.month, $(_this.Data.objSignContainer).find(".timer_sheet").html());153 } else { //签到失败154 alert("签到失败");155 }156 });157 } else {158 _this.SignInit();159 }160 161 162 },163 BindDetailEvent: function () {164 //绑定明细事件165 var _this = this;166 //点头关闭167 $(_this.Data.objSignContainer).find(".timer_close").click(function () {168 $(_this.Data.objSignContainer).fadeOut('fast');169 });170 //自动关闭171 $(_this.Data.objSignContainer).mouseout(function () {172 clearTimeout(_this.Data.timer);173 _this.Data.timer = setTimeout(function () { $(_this.Data.objSignContainer).find(".timer_close").trigger("click") }, 800);174 }).mouseover(function () {175 clearTimeout(_this.Data.timer);176 });177 //--上个月、下个月178 $(_this.Data.objSignContainer).delegate(_this.Data.PreMonthSelector, 'click', function () {179 var dtTmp = _this.Data.CurentShowDate;180 var dt = new Date(dtTmp.getFullYear(), dtTmp.getMonth() - 1, 1);181 _this.ShowMonthDetail(dt.getFullYear(), dt.getMonth() + 1);182 });183 $(_this.Data.objSignContainer).delegate(_this.Data.NextMonthSelector, 'click', function () {184 var dtTmp = _this.Data.CurentShowDate;185 var dt = new Date(dtTmp.getFullYear(), dtTmp.getMonth() + 1, 1);186 _this.ShowMonthDetail(dt.getFullYear(), dt.getMonth() + 1);187 });188 //用户签到189 $(_this.Data.objSignContainer).delegate('.active,.td_bg_hover', 'hover', function () {190 if ($(this).is(".td_bg_hover")) {191 $(this).prop("class", "active");192 } else {193 $(this).prop("class", "td_bg_hover");194 }195 });196 $(_this.Data.objSignContainer).delegate('.active,.td_bg_hover', 'click', function () {197 _this.SignAction($(this));198 });199 },200 SignInit: function () {201 ///