Php + mysql + jquery implement the calendar sign-in function, mysqljquery

Php + mysql + jquery implement the calendar sign-in function, mysqljquery

During website development, we often use the sign-in function to reward user points or perform other activities. The calendar sign-in was performed during the project development process, because I had no experience and had taken many detours and recorded the process and steps again.

1. Calendar sign-In Style:

2. This sign-in only records the number of sign-In records for this month. If you want to query the number, you can write other pages to query all sign-in records. (The functions are very troublesome, and we didn't do it in ancient times .)

3. Front-end code

<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; "> sign-in record </span> <if condition =" $ res ['0'] ['points'] eq '5' "> <div class =" already btn_center "> signed in </div> <else/> <div class = "ser_mbx btn_center"> sign in now </div> </if> <div class = "already btn_center" style =" d Isplay: none; "> checked in </div> <! -- <Div class = "minein"> points: <span style = "color: # b81d25"> {$ poin. points} </span> </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> <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 get calendar json data $. 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 ={// the year showYear: 2015 displayed in the current calendar, // The month showMonth: 1 displayed in the current calendar, // The days displayed in the current calendar showDays: 1, eventName: "load", // initialize the calendar init: function (signList) {calUtil. setMonthAndDay (); calUtil. draw (signList); calUtil. bindEnvent () ;}, draw: function (signList) {// bind the calendar var s Tr = calUtil. drawCal (calUtil. showYear, calUtil. showMonth, signList); $ ("# calendar" ).html (str); // bind the calendar header var calendarName = calUtil. showYear + "year" + calUtil. showMonth + "month"; $ (". calendar_month_span ").html (calendarName);}, // bindEnvent: function () {// bind last month event $ (". calendar_month_prev "). click (function () {// ajax get calendar json data/* var signList = [{"signDay": "10" },{ "signDay": "11 "}, {"signDay": "12" },{ "signDay": "13"}]; c AlUtil. eventName = "prev"; calUtil. init (signList); */}); // bind the next month event $ (". calendar_month_next "). click (function () {// ajax get calendar json data/* var signList = [{"signDay": "10" },{ "signDay": "11 "}, {"signDay": "12" },{ "signDay": "13"}]; calUtil. eventName = "next"; calUtil. init (signList); */}) ;}, // obtain the current selected year and month setMonthAndDay: function () {switch (calUtil. eventName) {case "load": var current = new Date (); calUtil. showYear = curren T. getFullYear (); calUtil. showMonth = current. getMonth () + 1; break; case "prev": var nowMonth = $ (". calendar_month_span "pai.html (). split ("year") [1]. split ("month") [0]; calUtil. showMonth = parseInt (nowMonth)-1; if (calUtil. showMonth = 0) {calUtil. showMonth = 12; calUtil. showYear-= 1;} break; case "next": var nowMonth = $ (". calendar_month_span "pai.html (). split ("year") [1]. split ("month") [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 () ;}, bu1_cal: 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); aMont H [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] = "day "; aMonth [0] [1] = "1"; aMonth [0] [2] = "2"; aMonth [0] [3] = "3 "; aMonth [0] [4] = "4"; aMonth [0] [5] = "5"; aMonth [0] [6] = "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) {v Ar myMonth = calUtil. bustmcal (iYear, iMonth); var htmls = new Array (); htmls. push ("<div class = 'sign _ main' id = 'sign _ lay'>"); 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. I FHasSigned (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. Background code: query whether to sign in today:

$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. query points:

/* Query points */$ 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. Sign in and write data to the database:

/* Sign in */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' => 'reward 5 point '); $ 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./* query the number of days for signing in this month and return the result in json format */

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');  }

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!