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数据
 $.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("<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');
 }

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

日历签到