移动端日历签到效果

公司要给移动端APP加上每日签到效果，点击签到后跳入一个新页面，里面包含一个日历，记录着签过到的日期（蓝字），需求要求只记录本月和上个月的签到记录。

如图

demo.html

  1 <!doctype html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>日期控件</title>
  6         <link rel="stylesheet" href="css/style.css">
  7     </head>
  8     <body>
  9         <div class="bor0127" id="calendar_contain">
 10               <table id="calendar" cellpadding="0" cellspacing="0" width="330">
 11                 <tbody>
 12                       <tr>
 13                             <th colspan="7" style="border-bottom:1px solid #CDCFD3;background:#FFF">
 14                               <p title="上一月份" onClick="JCalendar.update(-1);return false" style="float:left;" class="prev">
 15                                   <img src="images/sign_pre.png" height="15" width="15">
 16                             </p>
 17                                 <p id="calendar_title" style="float:left;color:#333;font-weight:normal;font-size:16px;">2015年11月</p>
 18                                 <p title="下一月份" onClick="JCalendar.update(1);return false" style="float:right;" class="next">
 19                                   <img src="images/sign_next.png" height="15" width="15">
 20                             </p>
 21                         </th>
 22                       </tr>
 23                       <tr>
 24                           <td style="background:#fff;">日</td>
 25                           <td style="background:#fff">一</td>
 26                           <td style="background:#fff">二</td>
 27                           <td style="background:#fff">三</td>
 28                           <td style="background:#fff">四</td>
 29                           <td style="background:#fff">五</td>
 30                           <td style="background:#fff;">六</td>
 31                       </tr>
 32                     <tr>
 33                         <td><div>1</div></td>
 34                         <td><div class="has">2</div></td>
 35                         <td><div>3</div></td>
 36                         <td><div>4</div></td>
 37                         <td><div>5</div></td>
 38                         <td><div>6</div></td>
 39                         <td><div class="has">7</div></td>
 40                     </tr>
 41                     <tr>
 42                         <td><div class="has">8</div></td>
 43                         <td><div>9</div></td>
 44                         <td><div class="has">10</div></td>
 45                         <td><div class="has">11</div></td>
 46                         <td><div>12</div></td>
 47                         <td><div id="c_today" class="c_today">13</div></td>
 48                         <td><div class="current has">14</div></td>
 49                     </tr>
 50                     <tr>
 51                         <td><div class="has">15</div></td>
 52                         <td><div>16</div></td>
 53                         <td><div>17</div></td>
 54                         <td><div class="has">18</div></td>
 55                         <td><div>19</div></td>
 56                         <td><div>20</div></td>
 57                         <td><div>21</div></td>
 58                     </tr>
 59                     <tr>
 60                         <td><div>22</div></td>
 61                         <td><div>23</div></td>
 62                         <td><div>24</div></td>
 63                         <td><div>25</div></td>
 64                         <td><div class="has">26</div></td>
 65                         <td><div>27</div></td>
 66                         <td><div>28</div></td>
 67                     </tr>
 68                     <tr>
 69                         <td><div>29</div></td>
 70                         <td><div>30</div></td>
 71                         <td></td>
 72                         <td></td>
 73                         <td></td>
 74                         <td></td>
 75                         <td></td>
 76                     </tr>
 77                     <tr>
 78                         <td></td>
 79                         <td></td>
 80                         <td></td>
 81                         <td></td>
 82                         <td></td>
 83                         <td></td>
 84                         <td></td>
 85                     </tr>
 86                 </tbody>
 87             </table>
 88         </div>
 89             
 90           <script type="text/javascript" src="js/jquery-1.js"></script>
 91         <script>
 92               var rili_json = {
 93                         "nowdate": "2016-7-5",
 94                         "showdate": "2016-7-1",
 95                         "list": [
 96                     {
 97                                     "theyear": "2016",
 98                                     "data": [
 99                             {
100                                                 "themonth": "06",
101                                                 "item": [
102                                                       {
103                                                           "thedate": "01"
104                                                       },
105                                                       {
106                                                           "thedate": "02"
107                                                       },
108                                                       {
109                                                           "thedate": "15"
110                                                       },
111                                                       {
112                                                           "thedate": "25"
113                                                       },
114                                                       {
115                                                           "thedate": "27"
116                                                       },
117                                                       {
118                                                           "thedate": "30"
119                                                       }
120                                                 ]
121                                           },
122                                           {
123                                                 "themonth": "07",
124                                                 "item": [
125                                                       {
126                                                           "thedate": "01"
127                                                       },
128                                                       {
129                                                           "thedate": "04"
130                                                       }
131                                                 ]
132                                         }
133                                     ]
134                     }
135                         ]
136             }
137         </script> 
138         <script type="text/javascript" src="js/rili.js"></script>
139     </body>
140 </html>

rili.js

  1 function Gid(objectId) {
  2     if (document.getElementById && document.getElementById(objectId)) {
  3         // W3C DOM
  4         return document.getElementById(objectId);
  5     } else if (document.all && document.all(objectId)) {
  6         // MSIE 4 DOM
  7         return document.all(objectId);
  8     } else if (document.layers && document.layers[objectId]) {
  9         // NN 4 DOM.. note: this won't find nested layers
 10         return document.layers[objectId];
 11     } else {
 12         return false;
 13     }
 14 }
 15 
 16 /**/var DtaT = rili_json.nowdate.split("-");
 17 var date1, date2, day, Oyear = DtaT[0],
 18     Omouth = DtaT[1],
 19     Oday = DtaT[2],
 20     Ohour = DtaT[3],
 21     st = 0;
 22 
 23 Omouth = Omouth.length == 1 ? "0" + Omouth : Omouth;
 24 Oday = Oday.length == 1 ? "0" + Oday : Oday;/**/
 25 
 26 //获取当前日期数据
 27 var html = '', 
 28     //yi, 
 29     //mi, 
 30     //di,
 31     arrs_h=[],
 32     arrs_n=[];
 33     
 34 var today = new Date();
 35 var hours = today.getHours(),
 36     minutes = today.getMinutes();
 37 var UrlS = location.href;
 38 var DtaId = location.href.split("/");
 39 
 40 function getFullYear(d) {
 41     yr = d.getYear();
 42     if (yr < 1000) yr += 1900;
 43     return yr;
 44 }
 45 
 46 /**/function JCalendar(year, month, date) {
 47     var _date = arguments.length == 0 ? new Date() : new Date(year, month - 1, date);
 48     //实例变量
 49     this.year = Oyear;
 50     this.month = Omouth;
 51     this.date = Oday;
 52 
 53     this.fday = new Date(this.year, this.month - 1, 1).getDay(); //每月第一天的前一天星期数
 54     this.dayNum = new Date(this.year, this.month, 0).getDate(); //每月的天数
 55     //成员变量，当前年月日
 56     JCalendar.cur_year = Oyear;
 57     JCalendar.cur_month = Omouth;
 58     //JCalendar.cur_date = _date.getDate();
 59     JCalendar.cur_date = Oday;
 60     setCurTime({
 61         //F: Gid("index_history"),
 62         Y: JCalendar.cur_year,
 63         M: JCalendar.cur_month,
 64         D: JCalendar.cur_date
 65     });
 66 }
 67 /**/JCalendar.prototype.show = function() {
 68     var _th = this;
 69     var fday = new Date(this.year, this.month - 1, 1).getDay(); //每月第一天的星期数
 70     //日历里的每个单元格的数据，预先定义一段空数组，对应日历里第一周空的位置。[注意星期天对应的数是0]
 71     var date = new Array(fday > 0 ? fday : 0);
 72     var dayNum = new Date(this.year, this.month, 0).getDate(); //每月的天数
 73     var html_str = new Array(); //保存日历控件的HTML代码
 74     var date_index = 0; //date数组的索引
 75     var weekDay = ["一", "二", "三", "四", "五"];
 76     for (var j = 1; j <= this.dayNum; j++) { //初始化date数组
 77         date.push(j);
 78     }
 79     html_str.push("<table id='calendar' cellspacing='0' cellpadding='0' width='330'>");
 80     html_str.push("<th colspan='7' style='border-bottom:1px solid #CDCFD3;background:#FFF'><p title='上一月份' onclick=\"JCalendar.update(-1);return false\" style='float:left;' class='prev'><img src='images/sign_pre.png' width='15' height='15' /></p><p id='calendar_title' style='float:left;color:#333;font-weight:normal;font-size:16px;'>" + _th.year + "年" + (parseInt(_th.month)<10?(_th.month):_th.month) + "月</p><p title='下一月份' onclick=\"JCalendar.update(1);return false\" style='float:right;' class='next'><img src='images/sign_next.png' width='15' height='15' /></p></th>");
 81     html_str.push("<tr>");
 82     html_str.push("<td style='background:#fff;'>日</td>");
 83     for (var i = 0; i < 5; i++) { //填充日历头
 84         html_str.push("<td style='background:#fff'>" + weekDay[i] + "</td>");
 85     }
 86     html_str.push("<td  style='background:#fff;'>六</td>");
 87     html_str.push("</tr>");
 88     //日历主体
 89     var tmp;
 90     for (var i = 0; i < 6; i++) { //填充日期，6行7列
 91         html_str.push("<tr>");
 92         for (var j = 0; j < 7; j++) {
 93             tmp = date[date_index++];
 94             tmp = tmp ? tmp : "";
 95             if (tmp == _th.date) {
 96                 html_str.push("<td><div id='c_today' class='c_today' onmouseover='JCalendar.click(this)'>" + JCalendar.cur_date + "</div></td>");
 97             }else if (tmp == "") {
 98                 html_str.push("<td></td>");
 99             }else {
100                 html_str.push("<td><div onmouseover='JCalendar.click(this)'>" + tmp + "</div></td>");
101             }
102             //console.log(tmp,date)
103         }
104         html_str.push("</tr>");
105     }
106 
107     html_str.push("</table>");
108     html_str.push("<table cellspacing='2' cellpadding='0' width='280'><tr><td colspan='7' style='background:#fff; display:none;'><p title='上一年份' onmouseover=\"this.style.color='#c00'\" onmouseout=\"this.style.color='#616161'\" onclick=\"JCalendar.update(-12);return false\" style='float:left;color:#616161;margin-right:4px;margin-left:4px;cursor:pointer;'><<上一年份</p><p title='下一年份' onclick=\"JCalendar.update(12);return false\"  onmouseover=\"this.style.color='#c00'\" onmouseout=\"this.style.color='#616161'\" style='float:right;margin-left:4px;color:#616161;cursor:pointer;'>下一年份>></p></td></tr></table>");
109     return html_str.join("");
110 }
111 
112 function rili_init(){
113     document.getElementById("calendar_contain").innerHTML = new JCalendar().show();/*  |xGv00|106707c554d687c1a77addb2ae941bcc */
114     
115     var json = rili_json;
116     for(var i=0;i<json.list.length;i++){
117         if(Oyear == json.list[i].theyear){
118             for (var j = 0; j < json.list[i].data.length; j++) {
119                 if(Omouth == json.list[i].data[j].themonth){
120                     var dlen = new Date(Oyear, Omouth, 0).getDate();
121                     
122                     
123                     for (var k = 0; k < json.list[i].data[j].item.length; k++){
124                         //活动添加class
125                         jQuery("#calendar tr td div").each(function(){
126                             var th = jQuery(this).html();
127                             th = th.length == 1 ? "0" + th : th;
128                             if(th == json.list[i].data[j].item[k].thedate){
129                                 jQuery(this).addClass("has");
130                             }
131                             if(new Date(json.showdate).getDate()==th){
132                                 jQuery(this).addClass("current");
133                             }
134                         });
135                         if(arrs_h.length>0){
136                             html = arrs_h[0];
137                             jQuery("#calendar tr td div").eq(arrs_n[0]-1).addClass("current");
138                             st = 0;
139                         }else if(json.list[i].data[j].themonth<12 && arrs_h.length == 0 && j < json.list[i].data.length-1){
140                             if(json.list[i].data[j+1].item[0].url){
141                                 html = '<dt>' + json.list[i].data[j+1].themonth + '月' + json.list[i].data[j+1].item[0].thedate + '日</dt><dd><h3>'+ json.list[i].data[j+1].item[0].title +'</h3><img src="'+ json.list[i].data[j+1].item[0].imgurl + '" alt="" height="100" width="222"><p class="info">'+ json.list[i].data[j+1].item[0].info +'</p><p class="f14"><a href="'+ json.list[i].data[j+1].item[0].url +'" title="" target="_blank">了解更多 >></a></p></dd>';
142                             }else{
143                                 html = '<dt>' + json.list[i].data[j+1].themonth + '月' + json.list[i].data[j+1].item[0].thedate + '日</dt><dd><h3>'+ json.list[i].data[j+1].item[0].title +'</h3><img src="'+ json.list[i].data[j+1].item[0].imgurl + '" alt="" height="100" width="222"><p class="info">'+ json.list[i].data[j+1].item[0].info +'</p></dd>';
144                             }
145                             
146                             st = 1;
147                         }else if(i<10 && i < json.list.length-1){
148                             if(json.list[i+1].data[0].item[0].url){
149                                 html = '<dt>' + json.list[i+1].data[0].themonth + '月' + json.list[i+1].data[0].item[0].thedate + '日</dt><dd><h3>'+ json.list[i+1].data[0].item[0].title +'</h3><img src="'+ json.list[i+1].data[0].item[0].imgurl + '" alt="" height="100" width="222"><p class="info">'+ json.list[i+1].data[0].item[0].info +'</p><p class="f14"><a href="'+ json.list[i+1].data[0].item[0].url +'" title="" target="_blank">了解更多 >></a></p></dd>';
150                             }else{
151                                 html = '<dt>' + json.list[i+1].data[0].themonth + '月' + json.list[i+1].data[0].item[0].thedate + '日</dt><dd><h3>'+ json.list[i+1].data[0].item[0].title +'</h3><img src="'+ json.list[i+1].data[0].item[0].imgurl + '" alt="" height="100" width="222"><p class="info">'+ json.list[i+1].data[0].item[0].info +'</p></dd>';
152                             }
153                             
154                             st = 1;
155                         }
156                     }
157                 }
158             }
159         }
160     }
161     //jQuery("#rili_info").html(html);
162     //静态方法
163     JCalendar.update = function(_month) {
164         var date = new Date(JCalendar.cur_year, JCalendar.cur_month - 1 + _month, 1);
165         var fday = date.getDay(); //每月第一天的星期数
166         var year = date.getFullYear();
167         var month = date.getMonth() + 1;
168         var dayNum = new Date(JCalendar.cur_year, parseInt(JCalendar.cur_month) + _month, 0).getDate(); //每月的天数
169         var tds = document.getElementById("calendar").getElementsByTagName("td");
170         for (var i = 7; i < tds.length; i++) //清空日历内容
171         tds[i].innerHTML = "";
172         document.getElementById("calendar_title").innerHTML = year + "年" + (month<10?('0'+month):month) + "月"; //更新显示年月
173         //更新当前年月
174         JCalendar.cur_year = year;
175         JCalendar.cur_month = month;
176 
177         //alert(parseInt(month) == Omouth)
178         //alert(JCalendar.cur_date)
179         for (var j = 1; j <= dayNum; j++) {
180             if (j == JCalendar.cur_date && year==DtaT[0] && month==DtaT[1]) {
181                 if(parseInt(month) == Omouth){
182                     tds[6 + fday + j].innerHTML = "<div class='c_today' onmouseover='JCalendar.click(this)'>" + Oday + "</div>";
183                 }else{
184                     tds[6 + fday + j].innerHTML = "<div class='' onmouseover='JCalendar.click(this)'>" + JCalendar.cur_date + "</div>";
185                 }
186             }else {
187                 tds[6 + fday + j].innerHTML = "<div onmouseover='JCalendar.click(this)'>" + j + "</div>";
188             }
189         }
190 
191         //获取日期数据状态
192         for(var i=0;i<json.list.length;i++){
193             if(JCalendar.cur_year == json.list[i].theyear){
194                 for (var j = 0; j < json.list[i].data.length; j++) {
195                     if(parseInt(JCalendar.cur_month) == json.list[i].data[j].themonth){
196                         for (var k = 0; k < json.list[i].data[j].item.length; k++){
197                             jQuery("#calendar tr td div").each(function(){
198                                 //console.log()
199                                 var th = jQuery(this).html();
200                                 th = th.length == 1 ? "0" + th : th;
201                                 if(th == json.list[i].data[j].item[k].thedate){
202                                     jQuery(this).addClass("has");
203                                 }
204                             });
205 //alert(json.list[i].data[j].themonth,Omouth,st)
206 
207                             var dlen = new Date(Oyear, Omouth, 0).getDate();
208                             for(var n =Oday; n<=dlen; n++){
209                                 if(n == parseInt(json.list[i].data[j].item[k].thedate)){
210                                     arrs_n.push(n);
211                                 }
212                             }
213 //alert(json.list[i].data[j].themonth == Omouth)
214                             if(json.list[i].theyear == Oyear && json.list[i].data[j].themonth == Omouth && st == 0){
215                                 jQuery("#calendar tr td div").each(function(){
216                                     jQuery("#calendar tr td div").removeClass("current");
217                                     jQuery("#calendar tr td div").eq(parseInt(arrs_n[0])-1).addClass("current");
218                                 });
219                             }else if(json.list[i].theyear == Oyear && json.list[i].data[j].themonth == (Omouth+1) && st == 1){
220                                 jQuery("#calendar tr td div").each(function(){
221                                     if(parseInt(jQuery(this).html()) == parseInt(json.list[i].data[j].item[0].thedate)){
222                                         jQuery("#calendar tr td div").removeClass("current");
223                                         jQuery(this).addClass("current");
224                                     }
225                                 });
226                             }else if(json.list[i].theyear == (parseInt(Oyear) + 1) && Omouth == 12 && json.list[i].data[j].themonth == 1 && st == 1){
227                                 jQuery("#calendar tr td div").each(function(){
228                                     if(parseInt(jQuery(this).html()) == parseInt(json.list[i].data[0].item[0].thedate)){
229                                         jQuery("#calendar tr td div").removeClass("current");
230                                         jQuery(this).addClass("current");
231                                     }
232                                 });
233                             }
234                         }
235                     }
236                 }
237             }
238         }
239         JCalendar.onupdate(year, month, JCalendar.cur_date);
240     }
241     JCalendar.onupdate = function(year, month, date) { //日历更改时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期
242         //alert(year + "年" + month + "月" + date + "日");
243     }
244 
245     JCalendar.click = function(obj) {
246         var tmp = document.getElementById("c_today");
247 
248         if(jQuery(obj).hasClass("has")){
249             jQuery("#calendar div").removeClass("current");
250             jQuery(obj).addClass("current");
251             JCalendar.onclick(JCalendar.cur_year, JCalendar.cur_month, parseInt(obj.innerHTML));
252         }
253         
254     }
255 
256     JCalendar.onclick = function(year, month, date, _index) {
257         if(!_index){
258             _index = 1;            
259         }
260         
261         var mo = today.getMonth() + 1;
262         if (month.toString().length == 1) {
263             month = "0" + month.toString();
264         }
265         if (date.toString().length == 1) {
266             date = "0" + date.toString();
267         }
268 
269         var ty = year.toString();
270         var tm = month.toString();
271         var td = date.toString();
272         var url;
273 
274         var html = '';        
275         for(var i=0;i<json.list.length;i++){
276             if(year == json.list[i].theyear){
277                 for (var j = 0; j < json.list[i].data.length; j++) {
278                     if(month == json.list[i].data[j].themonth){
279                         var subHtml = '',totalCount = 0,tempDate;
280                         for (var k = 0; k < json.list[i].data[j].item.length; k++){
281                             if(date == json.list[i].data[j].item[k].thedate){
282                                 totalCount++;
283                                 tempDate = json.list[i].data[j].item[k].thedate;
284 
285                             }
286                         }
287 
288                         if(_index > 1){
289                             html += '<div class="dashiji_page"><span class="d_l2" onclick="JCalendar.onclick(JCalendar.cur_year, JCalendar.cur_month, ' + tempDate + ', ' + (_index - 1) + ');"></span> ';
290                         }else{
291                             html += '<div class="dashiji_page"><span class="d_l2"></span> ';                            
292                         }
293                         if(_index < totalCount){
294                             html += '<span class="d_r2" onclick="JCalendar.onclick(JCalendar.cur_year, JCalendar.cur_month, ' + tempDate + ', ' + (_index + 1) + ');"></span> <i>' + _index + '</i>/'+totalCount + ' </div>';
295                         }else{
296                             html += ' <span class="d_r2"></span> <i>' + _index + '</i>/'+totalCount + '</div>';                            
297                         }
298                         html += subHtml;
299                     }
300                 }
301             }
302         }
303         jQuery("#rili_info").html(html);
304         
305         setCurTime({
306             //F: Gid("index_history"),
307             Y: ty,
308             M: tm,
309             D: td
310         })
311     }    
312     
313     //初始化未来最近的显示数据
314     var showdate = json.showdate.split("-");
315     JCalendar.onclick(showdate[0], showdate[1], showdate[2], 1);
316 }
317 rili_init();
318 
319 function setCurTime(a) {
320     if (typeof a != "object") return;
321     a.M = a.M.toString();
322     a.D = a.D.toString();
323 
324     if (a.M.length == 1) {
325         a.M = "0" + a.M;
326     }
327     if (a.D.length == 1) {
328         a.D = "0" + a.D;
329     }
330     //var f = a.F;
331     //setSelected(f.Year, a.Y);
332     //setSelected(f.Month, a.M);
333     if (a.D == "NaN") {
334         a.D = Oday
335     };
336     //setSelected(f.Day, a.D);
337     Gid("selected_date").innerHTML = a.Y + "-" + (a.M.length == 1 ? "0" + a.M : a.M) + "-" + (a.D.length == 1 ? "0" + a.D : a.D);
338 }
339 
340 function setSelected(a, b) {
341     if (!a || typeof a != "object") return;
342     if (!b) return;
343     a.value = b;
344 }

需要注意的是后台传来在json格式要按照demo里的传递。

posted @ 2016-07-05 15:28 sonicwater 阅读(930) 评论(2) 编辑收藏举报

刷新页面返回顶部

sonicwater

移动端日历签到效果

公告