php+mysql+jquery实现日历签到功能


Posted in PHP onFebruary 27, 2017

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

1.日历签到样式:

php+mysql+jquery实现日历签到功能

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

php+mysql+jquery实现日历签到功能

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

PHP 相关文章推荐
Win9x/ME下Apache+PHP安装配置
Oct 09 PHP
增加反向链接的101个方法 站长推荐
Jan 31 PHP
给php新手谈谈我的学习心得
Feb 25 PHP
深入理解php的MySQL连接类
Jun 07 PHP
解析如何用php screw加密php源代码
Jun 20 PHP
关于PHP语言构造器介绍
Jul 08 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
Sep 10 PHP
php编写的抽奖程序中奖概率算法
May 14 PHP
codeigniter实现get分页的方法
Jul 10 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
May 06 PHP
PHP检测接口Traversable用法详解
Dec 29 PHP
thinkphp5使用无限极分类
Feb 18 PHP
php查找字符串中第一个非0的位置截取
Feb 27 #PHP
php实时倒计时功能实现方法详解
Feb 27 #PHP
php自定义截取中文字符串-utf8版
Feb 27 #PHP
PHP读取XML格式文件的方法总结
Feb 27 #PHP
PHP批量修改文件名称的方法分析
Feb 27 #PHP
php基于PDO实现功能强大的MYSQL封装类实例
Feb 27 #PHP
php实现通过soap调用.Net的WebService asmx文件
Feb 27 #PHP
You might like
php INI配置文件的解析实现分析
2011/01/04 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
JS匿名函数实例分析
2016/11/26 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
Python代码调试的几种方法总结
2015/04/15 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
大学生职业生涯规划范文
2014/01/08 职场文书
七年级地理教学反思
2014/01/26 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS