php+mysql+jquery实现日历签到功能
author:一佰互联 2019-04-26   click:166

在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动。这次项目开发过程中做了日历签到,因为没有经验所有走了很多弯路,再次记录过程和步骤。

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");  }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持网页设计!