php jsでカレンダーチェックインを実装する方法-PHPの問題-php.cn

php jsでカレンダーチェックインを実装する方法

藏色散人

リリース： 2023-03-11 16:38:01

オリジナル

2191 人が閲覧しました

カレンダーチェックインを実装するための php js メソッド: 最初にフロントエンドコード "$(".ser_mbx").click(function(){...}" を作成し、次にバックエンドコードを作成します。 PHP コード "$this-> ;assign('res',$res);"; 最後に、データベースにサインインを書き込みます。このチュートリアルの動作環境: Windows7 システム、PHP7、バージョン 1、DELL G3 コンピューター

php mysql jquery カレンダーチェックイン機能を実装 php jsでカレンダーチェックインを実装する方法

Web サイト開発の過程で, ユーザーにポイントを付与したり、その他のアクティビティを行うためにチェックイン機能をよく使用します。私はプロジェクトの開発プロセス中にカレンダーサインインを行いました。経験がなかったので、多くの回り道をしてプロセスを記録し、

1. カレンダーのサインインスタイル:

2. このチェックインでは、今月のチェックイン数をクエリしたい場合は、別のページを書いてすべてのチェックイン記録をクエリすることができます（機能はありますが、非常に面倒です。過去にはありませんでした。）

#3. フロントエンドコード

<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. バックエンドコード: 今日チェックインするかどうかのクエリ:

$points = M(&#39;points_log&#39;);
    $userid=session(&#39;user.id&#39;);
    $begintime=date("Y-m-d H:i:s",mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;),date(&#39;Y&#39;)));
    $endtime=date("Y-m-d H:i:s",mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;)+1,date(&#39;Y&#39;))-1);
    $where=array(
        &#39;points&#39;=>&#39;5&#39;,
        &#39;user_id&#39;=>$userid,
        &#39;createtime&#39; => array(array(&#39;gt&#39;,$begintime),array(&#39;lt&#39;,$endtime)),
      );
    $res=$points->where($where)->order("createtime desc")->select();
    //var_dump($res[&#39;0&#39;][&#39;points&#39;]);
    $this->assign(&#39;res&#39;,$res);

ログイン後にコピー

5. クエリポイント:

/*查询积分*/
    $jfen=M(cuser);
    $list=$jfen->where(array(&#39;id&#39;=>$userid))->field(&#39;points&#39;)->find();
    $preg = &#39;/[0]*/&#39;;
    $poin = preg_replace($preg, &#39;&#39;, $list, 1);
    $this->assign(&#39;poin&#39;,$poin);

ログイン後にコピー

6. サインインしてデータベースに書き込みます:

/*签到*/
    if(IS_AJAX){  
      $userid=session(&#39;user.id&#39;);
      $type=&#39;签到&#39;;
      $typename=&#39;checkin&#39;;
      $id_status=&#39;up&#39;;
      $date=Date(&#39;Y-m-d H:i:s&#39;); 
      $dataList=array(
          &#39;user_id&#39;=>$userid,
          &#39;type&#39;=>$type, 
          &#39;typename&#39;=>$typename,
          &#39;id_status&#39;=>$id_status,
          &#39;points&#39;=>&#39;5&#39;,
          &#39;createtime&#39;=>$date,
          &#39;remark&#39;=>&#39;奖励5积分&#39;
          );  
      $points = M(&#39;points_log&#39;);
      if($points->add($dataList)){
        $log=session(&#39;user.id&#39;);
        $user=M(&#39;cuser&#39;);
        $user->where(array(&#39;id&#39;=>$log))->setInc(&#39;points&#39;,5);
      }  
      $this->ajaxReturn($status);
    }

ログイン後にコピー

7 . /*今月のクエリチェックイン日数と json 形式で返されます */

public function MonthSign(){
    $userid=session(&#39;user.id&#39;);
    $points = M(&#39;points_log&#39;);
    $res=$points->where(array(&#39;user_id&#39;=>$userid))->select();
    $sign=&#39;[&#39;;
    foreach($res as $key=>$value){
      $first=explode(&#39; &#39;, $value[&#39;createtime&#39;]);
      $second=explode(&#39;-&#39;, $first[&#39;0&#39;])[&#39;2&#39;];
      if($key==0){
        $sign .= &#39;{"signDay":"&#39;.$second.&#39;"}&#39;;
      }else{
        $sign .= &#39;,{"signDay":"&#39;.$second.&#39;"}&#39;;
      }
    }
    $sign .=&#39;]&#39;;
    $this->ajaxReturn($sign,&#39;json&#39;);
  }

ログイン後にコピー

推奨学習: "PHP ビデオチュートリアル"

以上がphp jsでカレンダーチェックインを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。