搜尋
首頁後端開發php教程php+mysql+jquery實作日曆簽到功能的方法

php+mysql+jquery實作日曆簽到功能的方法

墨辰丷
墨辰丷
May 25, 2018 am 11:47 AM
php功能

本文主要介紹了php mysql jquery實現日曆簽到功能的過程與步驟，具有很好的參考價值

在網站開發過程中我們會經常用到簽到功能來獎勵用戶積分，或者做一些其他活動。這次專案開發過程中做了日曆簽到，因為沒有經驗所有走了很多彎路，再次記錄過程和步驟。

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 mysql jquery實作行事曆簽到

基於jquery實作行事曆簽到功能_jquery

#javascript - PHP JS的行事曆簽到怎麼實作

#

以上是php+mysql+jquery實作日曆簽到功能的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
高流量網站的PHP性能調整高流量網站的PHP性能調整May 14, 2025 am 12:13 AM

TheSecretTokeEpingAphp-PowerEdwebSiterUnningSmoothlyShyunderHeavyLoadInVolvOLVOLVOLDEVERSALKEYSTRATICES：1）emplactopCodeCachingWithOpcachingWithOpCacheToreCescriptexecution Time，2）使用atabasequercachingCachingCachingWithRedataBasEndataBaseLeSendataBaseLoad，3）

PHP中的依賴注入：初學者的代碼示例PHP中的依賴注入：初學者的代碼示例May 14, 2025 am 12:08 AM

你應該關心DependencyInjection(DI)，因為它能讓你的代碼更清晰、更易維護。 1)DI通過解耦類，使其更模塊化，2)提高了測試的便捷性和代碼的靈活性，3)使用DI容器可以管理複雜的依賴關係，但要注意性能影響和循環依賴問題，4)最佳實踐是依賴於抽象接口，實現鬆散耦合。

PHP性能：是否可以優化應用程序？PHP性能：是否可以優化應用程序？May 14, 2025 am 12:04 AM

是的，優化papplicationispossibleandessential.1）empartcachingingcachingusedapcutorediucedsatabaseload.2）優化的atabaseswithexing，高效Quereteries，and ConconnectionPooling.3）EnhanceCodeWithBuilt-unctions，避免使用，避免使用ingglobalalairaiables，並避免使用

PHP性能優化：最終指南PHP性能優化：最終指南May 14, 2025 am 12:02 AM

theKeyStrategiestosigantificallyBoostPhpaPplicationPerformenCeare：1）UseOpCodeCachingLikeLikeLikeLikeLikeCacheToreDuceExecutiontime，2）優化AtabaseInteractionswithPreparedStateTementStatementStatementAndProperIndexing，3）配置

PHP依賴注入容器：快速啟動PHP依賴注入容器：快速啟動May 13, 2025 am 12:11 AM

aphpdepentioncontiveContainerIsatoolThatManagesClassDeptions，增強codemodocultion，可驗證性和Maintainability.itactsasaceCentralHubForeatingingIndections，因此reducingTightCightTightCoupOulplingIndeSingantInting。

PHP中的依賴注入與服務定位器PHP中的依賴注入與服務定位器May 13, 2025 am 12:10 AM

選擇DependencyInjection(DI)用於大型應用，ServiceLocator適合小型項目或原型。 1)DI通過構造函數注入依賴，提高代碼的測試性和模塊化。 2)ServiceLocator通過中心註冊獲取服務，方便但可能導致代碼耦合度增加。

PHP性能優化策略。PHP性能優化策略。May 13, 2025 am 12:06 AM

phpapplicationscanbeoptimizedForsPeedAndeffificeby：1）啟用cacheInphp.ini，2）使用preparedStatatementSwithPdoforDatabasequesies，3）3）替換loopswitharray_filtaray_filteraray_maparray_mapfordataprocrocessing，4）conformentnginxasaseproxy，5）

PHP電子郵件驗證：確保正確發送電子郵件PHP電子郵件驗證：確保正確發送電子郵件May 13, 2025 am 12:06 AM

phpemailvalidation invoLvesthreesteps：1）格式化進行regulareXpressecthemailFormat; 2）dnsvalidationtoshethedomainhasavalidmxrecord; 3）

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

如何修復KB5055612無法在Windows 10中安裝？
4 週前ByDDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
4 週前By尊渡假赌尊渡假赌尊渡假赌
<🎜>：種植花園 - 完整的突變指南
3 週前ByDDD
北端：融合系統，解釋
4 週前By尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前By尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

SublimeText3 英文版

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）專業的PHP整合開發工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

顯示更多

熱門話題

Java教學
1671
14
CakePHP 教程
1428
52
Laravel 教程
1331
25
PHP教程
1276
29
C# 教程
1256
24
顯示更多