基於jquery實現日歷簽到功能

使用Jquery實現每日簽到功能
基於jquery實現日歷簽到功能
jquery記事日歷插件e-calendar
 
思路：
1、獲取當月第一天是周幾
2、獲取當月共幾天
通過獲取下月的第0天，即是當月最后一天日期
3、通過二維數組構造當月日歷
4、將獲取到的日期第一天在日歷中展示..
 
知識點：
1、JS獲取當月的天數
getDate() 方法可返回月份的某一天，返回值是 1 ~ 31 之間的一個整數。
var d = new Date()
document.write(d.getDate())
輸出：17
 
getDay() 方法可返回表示星期的某一天的數字，返回值是 0（周日） 到 6（周六） 之間的一個整數。
var d=new Date()
document.write(d.getDay())
輸出：3
 
var d = new Date();
//d.getMonth()+1代表下個月，月份索引從0開始，即當前月為6月時，getMonth()返回值為5，創建日期時同理
 
//此處構造的日期為下個月的第0天，天數索引從1開始，第0天即代表上個月的最后一天
var curMonthDays = new Date(d.getFullYear(), (d.getMonth()+1), 0).getDate();
alert("本月共有 "+ curMonthDays +" 天");
 
2、構造當月日歷二維數組
Js代碼  收藏代碼
bulidCal : function(iYear, iMonth) {  
   var aMonth = new Array();  
   aMonth[0] = new Array(7);  
   aMonth[1] = new Array(7);  
   aMonth[2] = new Array(7);  
   aMonth[3] = new Array(7);  
   aMonth[4] = new Array(7);  
   aMonth[5] = new Array(7);  
   aMonth[6] = new Array(7);  
   var dCalDate = new Date(iYear, iMonth - 1, 1);  
   var iDayOfFirst = dCalDate.getDay();  
   var iDaysInMonth = calUtil.getDaysInmonth(iMonth, iYear);  
   var iVarDate = 1;  
   var d, w;  
   aMonth[0][0] = "日";  
   aMonth[0][1] = "一";  
   aMonth[0][2] = "二";  
   aMonth[0][3] = "三";  
   aMonth[0][4] = "四";  
   aMonth[0][5] = "五";  
   aMonth[0][6] = "六";  
   for (d = iDayOfFirst; d < 7; d++) {  
    aMonth[1][d] = iVarDate;  
    iVarDate++;  
   }  
   for (w = 2; w < 7; w++) {  
    for (d = 0; d < 7; d++) {  
     if (iVarDate <= iDaysInMonth) {  
      aMonth[w][d] = iVarDate;  
      iVarDate++;  
     }  
    }  
   }  
   return aMonth;  
  }  
 獲取當月第一天是周幾：
Js代碼  收藏代碼
var dCalDate = new Date(iYear, iMonth - 1, 1);    
var iDayOfFirst = dCalDate.getDay();    
 獲取當月共幾天：
Js代碼  收藏代碼
getDaysInmonth : function(iMonth, iYear){  
   var dPrevDate = new Date(iYear, iMonth, 0);  
   return dPrevDate.getDate();  
  }  
 3、構造當月日歷HTML
Js代碼  收藏代碼
drawCal : function(iYear, iMonth ,signList) {  
   var myMonth = calUtil.bulidCal(iYear, iMonth);  
   var htmls = new Array();  
   htmls.push("<div class='sign_main' id='sign_layer'>");  
   htmls.push("<div class='sign_succ_calendar_title'>");  
   htmls.push("<div class='calendar_month_next'>下月</div>");  
   htmls.push("<div class='calendar_month_prev'>上月</div>");  
   htmls.push("<div class='calendar_month_span'></div>");  
   htmls.push("</div>");  
   htmls.push("<div class='sign' id='sign_cal'>");  
   htmls.push("<table>");  
   htmls.push("<tr>");  
   htmls.push("<th>" + myMonth[0][0] + "</th>");  
   htmls.push("<th>" + myMonth[0][1] + "</th>");  
   htmls.push("<th>" + myMonth[0][2] + "</th>");  
   htmls.push("<th>" + myMonth[0][3] + "</th>");  
   htmls.push("<th>" + myMonth[0][4] + "</th>");  
   htmls.push("<th>" + myMonth[0][5] + "</th>");  
   htmls.push("<th>" + myMonth[0][6] + "</th>");  
   htmls.push("</tr>");  
   var d, w;  
   for (w = 1; w < 6; w++) {  
    htmls.push("<tr>");  
    for (d = 0; d < 7; d++) {  
     var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);  
     console.log(ifHasSigned);  
     if(ifHasSigned){  
      htmls.push("<td class='on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");  
     } else {  
      htmls.push("<td>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");  
     }  
    }  
    htmls.push("</tr>");  
   }  
   htmls.push("</table>");  
   htmls.push("</div>");  
   htmls.push("</div>");  
   return htmls.join('');  
  }  
 
4、控件的事件處理機制
指定一個默認的eventName:"load"，不同的事件定義不同的eventName
默認時：
Js代碼  收藏代碼
eventName:"load",  
  //初始化日歷  
  init:function(signList){  
    calUtil.setMonthAndDay();  
    calUtil.draw(signList);  
    calUtil.bindEnvent();  
  },  
 
Java代碼  收藏代碼
setMonthAndDay:function(){  
    switch(calUtil.eventName)  
    {  
      case "load":  
        var current = new Date();  
        calUtil.showYear=current.getFullYear();  
        calUtil.showMonth=current.getMonth() + 1;  
        break;  
      case "prev":  
        var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];  
        calUtil.showMonth=parseInt(nowMonth)-1;  
        if(calUtil.showMonth==0)  
        {  
            calUtil.showMonth=12;  
            calUtil.showYear-=1;  
        }  
        break;  
      case "next":  
        var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];  
        calUtil.showMonth=parseInt(nowMonth)+1;  
        if(calUtil.showMonth==13)  
        {  
            calUtil.showMonth=1;  
            calUtil.showYear+=1;  
        }  
        break;  
    }  
  },  
 不同的事件觸發：
Js代碼  收藏代碼
bindEnvent:function(){  
    //綁定上個月事件  
    $(".calendar_month_prev").click(function(){  
      //ajax獲取日歷json數據  
      var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];  
      calUtil.eventName="prev";  
      calUtil.init(signList);  
    });  
    //綁定下個月事件  
    $(".calendar_month_next").click(function(){  
      //ajax獲取日歷json數據  
      var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];  
      calUtil.eventName="next";  
      calUtil.init(signList);  
    });  
  }  
 
 
 
效果圖：


頁面引用：
Html代碼  收藏代碼
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>簽到效果實現</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>  
<link rel="stylesheet" type="text/css" href="css/sign.css"/>  
<script type="text/javascript" src="js/calendar.js"></script>  
<script type="text/javascript">  
$(function(){  
  //ajax獲取日歷json數據  
  var signList=[{"signDay":"09"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];  
   calUtil.init(signList);  
});  
</script>  
</head>  
<body>  
      
<div style="width:300px;height:300px;" id="calendar">  
</div>  
</body>  
</html>  
 JS：
Js代碼  收藏代碼
var calUtil = {  
  //當前日歷顯示的年份  
  showYear:2015,  
  //當前日歷顯示的月份  
  showMonth:1,  
  //當前日歷顯示的天數  
  showDays:1,  
  eventName:"load",  
  //初始化日歷  
  init:function(signList){  
    calUtil.setMonthAndDay();  
    calUtil.draw(signList);  
    calUtil.bindEnvent();  
  },  
  draw:function(signList){  
    //綁定日歷  
    var str = calUtil.drawCal(calUtil.showYear,calUtil.showMonth,signList);  
    $("#calendar").html(str);  
    //綁定日歷表頭  
    var calendarName=calUtil.showYear+"年"+calUtil.showMonth+"月";  
    $(".calendar_month_span").html(calendarName);    
  },  
  //綁定事件  
  bindEnvent:function(){  
    //綁定上個月事件  
    $(".calendar_month_prev").click(function(){  
      //ajax獲取日歷json數據  
      var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];  
      calUtil.eventName="prev";  
      calUtil.init(signList);  
    });  
    //綁定下個月事件  
    $(".calendar_month_next").click(function(){  
      //ajax獲取日歷json數據  
      var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];  
      calUtil.eventName="next";  
      calUtil.init(signList);  
    });  
  },  
  //獲取當前選擇的年月  
  setMonthAndDay:function(){  
    switch(calUtil.eventName)  
    {  
      case "load":  
        var current = new Date();  
        calUtil.showYear=current.getFullYear();  
        calUtil.showMonth=current.getMonth() + 1;  
        break;  
      case "prev":  
        var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];  
        calUtil.showMonth=parseInt(nowMonth)-1;  
        if(calUtil.showMonth==0)  
        {  
            calUtil.showMonth=12;  
            calUtil.showYear-=1;  
        }  
        break;  
      case "next":  
        var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];  
        calUtil.showMonth=parseInt(nowMonth)+1;  
        if(calUtil.showMonth==13)  
        {  
            calUtil.showMonth=1;  
            calUtil.showYear+=1;  
        }  
        break;  
    }  
  },  
  getDaysInmonth : function(iMonth, iYear){  
   var dPrevDate = new Date(iYear, iMonth, 0);  
   return dPrevDate.getDate();  
  },  
  bulidCal : function(iYear, iMonth) {  
   var aMonth = new Array();  
   aMonth[0] = new Array(7);  
   aMonth[1] = new Array(7);  
   aMonth[2] = new Array(7);  
   aMonth[3] = new Array(7);  
   aMonth[4] = new Array(7);  
   aMonth[5] = new Array(7);  
   aMonth[6] = new Array(7);  
   var dCalDate = new Date(iYear, iMonth - 1, 1);  
   var iDayOfFirst = dCalDate.getDay();  
   var iDaysInMonth = calUtil.getDaysInmonth(iMonth, iYear);  
   var iVarDate = 1;  
   var d, w;  
   aMonth[0][0] = "日";  
   aMonth[0][1] = "一";  
   aMonth[0][2] = "二";  
   aMonth[0][3] = "三";  
   aMonth[0][4] = "四";  
   aMonth[0][5] = "五";  
   aMonth[0][6] = "六";  
   for (d = iDayOfFirst; d < 7; d++) {  
    aMonth[1][d] = iVarDate;  
    iVarDate++;  
   }  
   for (w = 2; w < 7; w++) {  
    for (d = 0; d < 7; d++) {  
     if (iVarDate <= iDaysInMonth) {  
      aMonth[w][d] = iVarDate;  
      iVarDate++;  
     }  
    }  
   }  
   return aMonth;  
  },  
  ifHasSigned : function(signList,day){  
   var signed = false;  
   $.each(signList,function(index,item){  
    if(item.signDay == day) {  
     signed = true;  
     return false;  
    }  
   });  
   return signed ;  
  },  
  drawCal : function(iYear, iMonth ,signList) {  
   var myMonth = calUtil.bulidCal(iYear, iMonth);  
   var htmls = new Array();  
   htmls.push("<div class='sign_main' id='sign_layer'>");  
   htmls.push("<div class='sign_succ_calendar_title'>");  
  // htmls.push("<div class='calendar_month_next'>下月</div>");  
   //htmls.push("<div class='calendar_month_prev'>上月</div>");  
   htmls.push("<div class='calendar_month_span'></div>");  
   htmls.push("</div>");  
   htmls.push("<div class='sign' id='sign_cal'>");  
   htmls.push("<table>");  
   htmls.push("<tr>");  
   htmls.push("<th>" + myMonth[0][0] + "</th>");  
   htmls.push("<th>" + myMonth[0][1] + "</th>");  
   htmls.push("<th>" + myMonth[0][2] + "</th>");  
   htmls.push("<th>" + myMonth[0][3] + "</th>");  
   htmls.push("<th>" + myMonth[0][4] + "</th>");  
   htmls.push("<th>" + myMonth[0][5] + "</th>");  
   htmls.push("<th>" + myMonth[0][6] + "</th>");  
   htmls.push("</tr>");  
   var d, w;  
   for (w = 1; w < 6; w++) {  
    htmls.push("<tr>");  
    for (d = 0; d < 7; d++) {  
     var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);  
     console.log(ifHasSigned);  
     if(ifHasSigned){  
      htmls.push("<td class='on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");  
     } else {  
      htmls.push("<td>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");  
     }  
    }  
    htmls.push("</tr>");  
   }  
   htmls.push("</table>");  
   htmls.push("</div>");  
   htmls.push("</div>");  
   return htmls.join('');  
  }  
};