Comment implémenter la fonction de connexion au calendrier en utilisant php+mysql+jquery

Cet article présente principalement le processus et les étapes de php+mysql+jquery pour implémenter la fonction d'enregistrement du calendrier, qui a une bonne valeur de référence

Dans le processus de développement de sites Web, nous utiliserons souvent le fonction d'enregistrement pour récompenser les points des utilisateurs. Ou faire d'autres activités. Lors du développement de ce projet, j'ai effectué un enregistrement dans le calendrier. Parce que je n'avais aucune expérience, j'ai fait de nombreux détours et j'ai réenregistré le processus et les étapes.

1. Style de connexion au calendrier :

2. -ins ce mois-ci Si vous le souhaitez, la requête peut être écrite sur d'autres pages pour interroger tous les enregistrements d'enregistrement. (La fonction est disponible, mais elle est très gênante, mais elle n'a pas été implémentée dans les temps anciens.)

Code frontal

<include file="Public:menu" />
<style type="text/css">  
*{margin:0;padding:0;font:14px/1.8 "Helvetica Neue","microsoft yahei";}
</style>
<p class="ser_bx">
  <p class="ser_bxc">
    <span style="color:#5381B5;">签到记录</span>
    <if condition="$res[&#39;0&#39;][&#39;points&#39;] eq &#39;5&#39;">
      <p class="already btn_center">已签到</p>
    <else />
      <p class="ser_mbx btn_center">立即签到</p>
    </if>
    <p class="already btn_center" style="display:none;">已签到</p>
    <!--<p class="minein">积分 : <span style="color:#b81d25">{$poin.points}</span></p>-->
  </p>
</p>
<p class="check_box">
<p style="width:500px;height:400px;margin:0 auto;">
  <p style="width:300px;height:300px;margin-left:50px;" id="calendar"></p>
</p>
  </p>
<script type="text/javascript">
   $(document).ready(function(){
     $(".ser_mbx").click(function(){
       $.ajax({
        url:"{:U(&#39;Index/Checkin&#39;)}",
          type:&#39;POST&#39;,
        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(&#39;Index/MonthSign&#39;)}",
          type:&#39;POST&#39;,
        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("<p class=&#39;sign_main&#39; id=&#39;sign_layer&#39;>");
   htmls.push("<p class=&#39;sign_succ_calendar_title&#39;>");
   htmls.push("<p class=&#39;calendar_month_span&#39;></p>");
   htmls.push("</p>");
   htmls.push("<p class=&#39;sign&#39; id=&#39;sign_cal&#39;>");
   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=&#39;on&#39;>" + (!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("</p>");
   htmls.push("</p>");
   return htmls.join(&#39;&#39;);
  }
};
</script>
<include file="Public:footer" />

4. Code backend : Vérifiez si vous vous êtes enregistré aujourd'hui :

$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. Points de contrôle :

/*查询积分*/
    $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. Connectez-vous et écrivez à la base de données :

/*签到*/
    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 /*Requérez le nombre de jours d'enregistrement ce mois-ci et renvoyez-le au format 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');
  }

Ce qui précède est l'intégralité du contenu de cet article, j'espère que ce sera le cas être utile à l’étude de chacun.

Recommandations associées :

php+mysql+jquery pour implémenter la Connexion au calendrier

Implémentation de la fonction Connexion au calendrierbasée sur jquery_jquery

javascript - Comment implémenter Signe du calendrier -in avec PHP+JS Implémenter

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!