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

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

# 日历签到  # 基于jquery实现日历签到功能  # jQuery EasyUI API 中文文档 - Calendar日历使用  # 为开发者准备的10款最好的jQuery日历插件  # jQuery简单实现日历的方法  # jQuery写的日历(包括日历的样式及功能)  # jQuery 联动日历实现代码  # .net mvc页面UI之Jquery博客日历控件实现代码  # JQuery日历插件My97DatePicker日期范围限制  # Jquery日历插件制作简单日历  # 基于jquery实现日历效果  # 绑定  # 走了  # 并以  # 上个月  # 下个月  # 过程中  # 中做  # 网站开发  # ajax  # function  # ready  # click  # url  # datatype  # json  # success  # Index  # Checkin  # POST  # document 

相关文章： 建站之星如何通过成品分离优化网站效率？  C++ static_cast和dynamic_cast区别_C++静态转换与动态类型安全转换  建站之星如何实现网站加密操作？  平台云上自主建站：模板化设计与智能工具打造高效网站  如何在建站之星网店版论坛获取技术支持？  如何快速上传自定义模板至建站之星？  如何在Mac上搭建Golang开发环境_使用Homebrew安装和管理Go版本  网站制作外包价格怎么算,招聘网站上写的“外包”是什么意思？  如何获取免费开源的自助建站系统源码？  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  寿县云建站：智能SEO优化与多行业模板快速上线指南  如何选购建站域名与空间？自助平台全解析  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  建站之星CMS建站配置指南：模板选择与SEO优化技巧  成都网站制作价格表,现在成都广电的单独网络宽带有多少的，资费是什么情况呢？  天河区网站制作公司,广州天河区如何办理身份证？需要什么资料有预约的网站吗？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  淘宝制作网站有哪些,淘宝网官网主页？  学校免费自助建站系统：智能生成+拖拽设计+多端适配  魔毅自助建站系统：模板定制与SEO优化一键生成指南  网站制作需要会哪些技术,建立一个网站要花费多少？  微信小程序制作网站有哪些,微信小程序需要做网站吗？  智能起名网站制作软件有哪些,制作logo的软件？  建站之星后台管理：高效配置与模板优化提升用户体验  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  XML的“混合内容”是什么 怎么用DTD或XSD定义  油猴 教程,油猴搜脚本为什么会网页无法显示？  音响网站制作视频教程,隆霸音响官方网站？  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  台州网站建设制作公司,浙江手机无犯罪记录证明怎么开？  专业商城网站制作公司有哪些,pi商城官网是哪个？  网站制作说明怎么写,简述网页设计的流程并说明原因？  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  Android使用GridView实现日历的简单功能  魔方云NAT建站如何实现端口转发？  如何通过NAT技术实现内网高效建站？  免费ppt制作网站,有没有值得推荐的免费PPT网站？  网站制作员失业,怎样查看自己网站的注册者？  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  网站按钮制作软件,如何实现网页中按钮的自动点击？  php条件判断怎么写_ifelse和switchcase的使用区别【对比】  内网网站制作软件,内网的网站如何发布到外网？  建站主机与虚拟主机有何区别？如何选择最优方案？  c# 服务器GC和工作站GC的区别和设置  网站制作免费,什么网站能看正片电影？  建站与域名管理如何高效结合？  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  代购小票制作网站有哪些,购物小票的简要说明？  南宁网站建设制作定制,南宁网站建设可以定制吗？