项目中的*签到*小功能！

由于咱们项目中的签到：主要是为了让用户通过签到次数，来完成任务，获得相应的奖励！

上图：

   

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>&nbsp;</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 };

 

 

       

转载于:https://www.cnblogs.com/Kummy/archive/2013/05/13/3075376.html