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

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

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实现日历签到功能

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

时间: 2017-02-25

php日历制作代码分享

calendar.class.php 复制代码 代码如下: <?phpclass Calendar {  private $year; //当前的年  private $month; //当前的月  private $start_weekday; //当月的第一天对应的是周几  private $days; //当前月一共多少天 function __construct(){   $this->year=isset($_GET["year"]) ? $_GET["

基于ThinkPHP实现的日历功能实例详解

本文实例讲述了基于ThinkPHP实现的日历功能.分享给大家供大家参考,具体如下: 开发环境介绍 最新,闲来没事,便开发了一款简单的日历,来统计工作情况.为了开发便捷,使用ThinkPHP架构.界面如下图 备注:每页包含上一个月,当前月,下一个月的日期,并用不同的颜色区分,如果某天工作了,便圈出来. 主要是以下两个文件 重要文件描述 功能文件 CalenDar.class.php主要负责,获取日历详细信息的,不涉及用户数据操作. 代码如下: <?php namespace Util; class

PHP简单日历实现方法

本文实例讲述了PHP简单日历实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <?php /* * Created on 2016-7-20 */ SimCalendar('2016-08');//显示8月份日历 function SimCalendar($date) { /** * 简单日历输出,本函数需要cal_days_in_month的支持 * @param $date Y-m 要输出的日期 */ echo '<table border="1&q

php日历[测试通过]

比较不错的一款php日历代码 复制代码 代码如下: <?php /** * 日历 * * Copyright(c) 2007 by 陈毅鑫(深空). All rights reserved * To contact the author write to {@link mailto:shenkong@php.net} * @author 陈毅鑫(深空) */ if (function_exists('date_default_timezone_set')) { date_default_time

一个比较不错的PHP日历类分享

说到对时期和时间的处理,就一定要介绍一下日历程序的编写.但一提起编写日历,大多数人都会认为日历的作用只是为了在页上显示当前的日期,其实日历在我们的开发中有更重要的作用.例如我们开发一个"记事本"就需要通过日历设定日期,还有一些系统中需要按日期去排任务,也需要日历,等等.本例涉及的日期和时间函数并不是很多,都是前面介绍的内容,主要是通过一个日历类的编写,巩固一下前面介绍过的面向对象的语法知识,以及时间函数应用,最主要的是可以提升初学者的思维逻辑和程序设计能力.将日历类Calendar声明

php下实现农历日历的代码

复制代码 代码如下: php农历日历 <?   ###########################################   #作者: 沈潋(S&S Lab)                      #   #E-mail:shenlian@hotmail.com              #   #web: http://www.focus-2000.com           #   #                                         #

PHP实现的简单日历类

本文实例讲述了PHP实现的简单日历类.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: date_default_timezone_set("etc/gmt-8"); header("Content-type: text/html; charset=utf-8"); class calendar{ var $t = array(); var $datesofmonth = array('1'=>'31','2'=>'28','3'=>

ThinkPHP实现多数据库连接的解决方法

ThinkPHP实现连接多个数据的时候,如果数据库在同一个服务器里的话只需要这样定义模型: class MembersModel extends Model{ protected $trueTableName = 'members.members'; //数据库名.表名(包含了前缀) } 然后就可以像D("Members");这样实例化模型,像普通模型那样操作了. 但后来发现他的数据库在两个不同的服务器,这样上面的方法就不行了. 这时候就需要使用TP的多数据连接特性了. 对此,查阅官方

Thinkphp模板中截取字符串函数简介

在php中截取字符串的函数有很多,而在thinkphp中也可以直接使用php的函数,本文给大家简单的介绍thinkPHP模板中截取字符串的具体用法,希望能对各位有所帮助. 对于英文字符可使用如下形式: 复制代码 代码如下: {$vo.title|substr=0,5} 如果是中文字符thinkphp提供了msubstr,用法如下: 复制代码 代码如下: function msubstr($str, $start=0, $length, $charset="utf-8″, $suffix=true

thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)

本文实例讲述了thinkPHP+PHPExcel实现读取文件日期的方法.分享给大家供大家参考,具体如下: 我们使用PHPExcel读取excel文件后发现,时间都是类似于这样的数字:41890.620138889,那么如何将它处理成我们想要的2014-09-08 14:53:00这样格式的日期呢,看代码: Vendor('PHPExcel.PHPExcel.IOFactory'); $inputFileName = 'Public/demo/demo.xls'; $objReader = new

ThinkPHP多表联合查询的常用方法

ThinkPHP中关联查询(即多表联合查询)可以使用 table() 方法或和join方法,具体使用如下例所示: 1.原生查询示例: 复制代码 代码如下: $Model = new Model(); $sql = 'select a.id,a.title,b.content from think_test1 as a, think_test2 as b where a.id=b.id '.$map.' order by a.id '.$sort.' limit '.$p->firstRow.',

php+javascript的日历控件

复制代码 代码如下: <html> <head> <title>js calendar</title> <script language="javascript"> /* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo * ----------------------------------------------------------- * * The DHT

PHP 简单日历实现代码

复制代码 代码如下: <?php $monthoneday=date("Ym")."01"; $oneweekday=date("w",strtotime($monthoneday)); //获得本月1号星期几 $monthday=date("t"); //本月多少天 $startlow=($oneweekday==0)?7:$oneweekday; //从第几列开始 for($a=1,$b=$startlow;$a&l

纯js简单日历实现代码

复制代码 代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa

js编写当天简单日历效果【实现代码】

之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解

vue中的非父子间的通讯问题简单的实例代码

官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>

用js编写的简单的计算器代码程序

最近编写的一个简单的计算器代码程序,先给大家展示一下 分享代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

JavaWeb中的简单分页完整代码(推荐)

这次主要是讲解一下通过登录后对得到的数据进行分页,首先我们新建一个登录页面login.jsp,因为我们主要学习一下分页,所以登录验证的部分不再阐述,主要代码如下: <form action="pageServlet"> 用户名:<input type="text" name="username"><br> 密 码:<input type="text" name="passwo

JS实现的N多简单无缝滚动代码(包含图文效果)

本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. 接着滚动开始,当滚动条到达元素的中间位置时: 不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现"跳跃".稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2

分享两段简单的JS代码防止SQL注入

1.URL地址防注入: //过滤URL非法SQL字符 var sUrl=location.search.toLowerCase(); var sQuery=sUrl.substring(sUrl.indexOf("=")+1); re=/select|update|delete|truncate|join|union|exec|insert|drop|count|'|"|;|>|<|%/i; if(re.test(sQuery)) { alert("请勿