由于咱们项目中的签到：主要是为了让用户通过签到次数，来完成任务，获得相应的奖励！
上图：
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 = ['<div class="qd_complet" id="' + hoverID + '">', '<div class="qd_complet_tx">', '<a href="javascript:void(0);" class="qd_complet_b_left PreMonth"></a>', '<div class="qd_complet_timer">' + str_yearmonth + '</div>', '<a href="javascript:void(0);" class="qd_complet_b_right NextMonth"></a>', '<div class="qd_complet_en">', '<h2></h2>', '<a href="javascript:void(0);" class="timer_close">×</a>', '</div>', '</div>', '<div class="timer_sheet"></div>', '</div>']; 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 = ['<table cellpadding="0" cellspacing="0" width="100%" border="1" style="border-collapse: collapse;">', '<thead><tr> <td class="timer_td1"> 日</td><td> 一</td><td> 二</td><td>三 </td> <td>四</td><td>五</td><td>六</td></tr></thead>', '<tbody>']; 57 58 var dtFirstDay = new Date(Year, Month - 1, 1); 59 var weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; 60 var weeknum = dtFirstDay.getDay(); 61 if (weeknum > 0) { 62 ary[ary.length] = new Array(weeknum + 1).join('<td class="td_bg_none"></td>'); 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] = '<tr>'; 75 } 76 //是否为当天 77 if (aryflag[i] === true) {//签到 78 ary[ary.length] = '<td>' + i + '</td>'; 79 } else {//没有签到 80 if (curDayNum === i) { 81 strClass = "td_bg_hover"; 82 } else { strClass = "td_bg_none"; } 83 ary[ary.length] = '<td class="' + strClass + '">' + i + '</td>'; 84 } 85 if (weeknum == 6) { 86 ary[ary.length] = '</tr>'; 87 weeknum = 0; 88 } else { 89 ++weeknum; 90 } 91 } 92 if (weeknum > 0) { 93 ary[ary.length] = new Array(8 - weeknum).join('<td class="td_bg_none"></td>'); 94 ary[ary.length] = '</tr>'; 95 } 96 ary[ary.length] = '</tbody>'; 97 ary[ary.length] = '</table>'; 98 ary[ary.length] = '<p style="text-align:center; font-family:微软雅黑; font-size:20px; color:#3aa9ce; line-height:40px; border:1px solid #badcf6; border-top:none;"><span style="display:none;">恭喜您,签到成功</span> </p>'; 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 ///<summary> 202 ///生成签到明细 203 ///</summary> 204 var _this = this; 205 _this.CreateDOM(); 206 _this.BindDetailEvent(); 207 }, 208 Init: function (objBtn) { 209 if ($(objBtn).is("a")) { 210 this.Data.objSignButton = objBtn; 211 this.BindSignEvent(); 212 } 213 } 214 };
