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> <div class=ser_bx> <div class=ser_bxc> <span style=color:#5381B5;>签到记录</span> <if condition=$res[0][points] eq 5> <div class=already btn_center>已签到</div> <else /> <div class=ser_mbx btn_center>立即签到</div> </if> <div class=already btn_center style=display:none;>已签到</div> <!--<div class=minein>积分 : <span style=color:#b81d25>{$poin.points}</span></div>--> </div> </div> <div class=check_box> <div style=width:500px;height:400px;margin:0 auto;> <div style=width:300px;height:300px;margin-left:50px; id=calendar></div> </div> </div> <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数据t(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(<div class=sign_main id=sign_layer>); htmls.push(<div class=sign_succ_calendar_title>); 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 < 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(</div>); htmls.push(</div>); 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); }

　　以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！