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 相关文章推荐
基于qmail的完整WEBMAIL解决方案安装详解
Oct 09 PHP
PHP 高手之路(二)
Oct 09 PHP
PHP 第一节 php简介
Apr 28 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
Jul 31 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
Dec 20 PHP
PHP使用Alexa API获取网站的Alexa排名例子
Jun 12 PHP
Linux下PHP连接Oracle数据库
Aug 20 PHP
ThinkPHP处理Ajax返回的方法
Nov 22 PHP
php实现用户注册密码的crypt加密
Jun 08 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
Jan 10 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
Mar 25 PHP
php计数排序算法的实现代码(附四个实例代码)
Mar 31 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
PHP入门学习笔记之一
2010/10/12 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
python实现大学人员管理系统
2019/10/25 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
python 简单的调用有道翻译
2020/11/25 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
汽车促销活动方案
2014/03/31 职场文书
个人委托书怎么写
2014/09/17 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏