php+mysql+jquery實現日曆簽到

在網站開發過程中我們會經常用到簽到功能來獎勵使用者積分，或者做一些其他活動。這次項目開發過程中做了日曆簽到，因為沒有經驗所有走了很多彎路，再次記錄過程和步驟。

1.日曆簽到樣式：

2.本次簽到只記錄本月簽到數，想要查詢可以寫其他頁面，查詢所有簽到記錄。（功能有，非常麻煩，古沒有做。）

3.前台代碼

<include file="Public:menu" /><style type="text/css">  *{margin:0;padding:0;font:14px/1.8 "Helvetica Neue","microsoft yahei";}</style><p class="ser_bx">  <p class="ser_bxc">    <span style="color:#5381B5;">簽到記錄</span>    <if condition="$res['0']['points'] eq '5'">      <p class="already btn_center">已簽到</p>    <else />      <p class="ser_mbx btn_center">立即簽到</p>    </if>    <p class="already btn_center" style="display:none;">已簽到</p>    <!--<p class="minein">積分 : <span style="color:#b81d25">{$poin.points}</span></p>-->  </p></p><p class="check_box"><p style="width:500px;height:400px;margin:0 auto;">  <p style="width:300px;height:300px;margin-left:50px;" id="calendar"></p></p>  </p><script type="text/javascript">   $(document).ready(function(){     $(".ser_mbx").click(function(){       $.ajax({        url:"{:U('Index/Checkin')}",          type:'POST',        datatype:"json",        success:function(msg){          $(".already").show();          $(".ser_mbx").hide();       MonthSign();        }      });     });   });</script> <script type="text/javascript" language="javascript">  $(document).ready(function(){          MonthSign();   });   function MonthSign(){     //ajax擷取日曆json資料     $.ajax({        url:"{:U('Index/MonthSign')}",          type:'POST',        datatype:"json",        success:function(msg){          //alert(msg);          /*var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];          */          calUtil.init(JSON.parse(msg));        }      });  } </script>  <script type="text/javascript">  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("<p class='sign_main' id='sign_layer'>");   htmls.push("<p class='sign_succ_calendar_title'>");   htmls.push("<p class='calendar_month_span'></p>");   htmls.push("</p>");   htmls.push("<p 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 < 7; 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("</p>");   htmls.push("</p>");   return htmls.join('');  }};</script><include file="Public:footer" />

4.後台代碼：查詢今天是否簽到：

$points = M('points_log');    $userid=session('user.id');    $begintime=date("Y-m-d H:i:s",mktime(0,0,0,date('m'),date('d'),date('Y')));    $endtime=date("Y-m-d H:i:s",mktime(0,0,0,date('m'),date('d')+1,date('Y'))-1);    $where=array(        'points'=>'5',        'user_id'=>$userid,        'createtime' => array(array('gt',$begintime),array('lt',$endtime)),      );    $res=$points->where($where)->order("createtime desc")->select();    //var_dump($res['0']['points']);    $this->assign('res',$res);

5.查詢積分：

/*查詢積分*/    $jfen=M(cuser);    $list=$jfen->where(array('id'=>$userid))->field('points')->find();    $preg = '/[0]*/';    $poin = preg_replace($preg, '', $list, 1);    $this->assign('poin',$poin);

6.簽到寫入資料庫：

/*簽到*/    if(IS_AJAX){        $userid=session('user.id');      $type='簽到';      $typename='checkin';      $id_status='up';      $date=Date('Y-m-d H:i:s');       $dataList=array(          'user_id'=>$userid,          'type'=>$type,           'typename'=>$typename,          'id_status'=>$id_status,          'points'=>'5',          'createtime'=>$date,          'remark'=>'獎勵5積分'          );        $points = M('points_log');      if($points->add($dataList)){        $log=session('user.id');        $user=M('cuser');        $user->where(array('id'=>$log))->setInc('points',5);      }        $this->ajaxReturn($status);    }

7. /*查詢本月簽到天數，並以json格式返回*/

public function MonthSign(){    $userid=session('user.id');    $points = M('points_log');    $res=$points->where(array('user_id'=>$userid))->select();    $sign='[';    foreach($res as $key=>$value){      $first=explode(' ', $value['createtime']);      $second=explode('-', $first['0'])['2'];      if($key==0){        $sign .= '{"signDay":"'.$second.'"}';      }else{        $sign .= ',{"signDay":"'.$second.'"}';      }    }    $sign .=']';    $this->ajaxReturn($sign,'json');  }