php js method to implement calendar check-in: first create the front-end code "$(".ser_mbx").click(function(){...}"; then create the back-end PHP code "$this-> ;assign('res',$res);"; Finally, write the sign-in into the database.
The operating environment of this tutorial: windows7 system, PHP7. Version 1, DELL G3 computer
php mysql jquery implements calendar check-in function
In the process of website development, we often use the check-in function to reward user points, or do Some other activities. I did a calendar sign-in during the project development process. Because I had no experience, I took a lot of detours and recorded the process and steps again.
1. Calendar sign-in style:
2. This check-in only records the number of check-ins this month. If you want to query, you can write other pages to query all check-in records. (The function is available, but it is very troublesome. It is not available in the past. Do.)
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> <p class="ser_bx"> <p class="ser_bxc"> <span style="color:#5381B5;">签到记录</span> <if condition="$res['0']['points'] eq '5'"> <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('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("<p class='sign_main' id='sign_layer'>"); htmls.push("<p class='sign_succ_calendar_title'>"); htmls.push("<p class='calendar_month_span'></p>"); htmls.push("</p>"); htmls.push("<p 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("</p>"); htmls.push("</p>"); return htmls.join(''); } }; </script> <include file="Public:footer" />
4. Back-end code: Query whether to check 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:
/*查询积分*/ $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 to the database:
/*签到*/ 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. /*Query this month Number of check-in days and returned 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'); }
Recommended learning: "PHP Video Tutorial"
The above is the detailed content of How to implement calendar check-in in php js. For more information, please follow other related articles on the PHP Chinese website!

The article compares ACID and BASE database models, detailing their characteristics and appropriate use cases. ACID prioritizes data integrity and consistency, suitable for financial and e-commerce applications, while BASE focuses on availability and

The article discusses securing PHP file uploads to prevent vulnerabilities like code injection. It focuses on file type validation, secure storage, and error handling to enhance application security.

Article discusses best practices for PHP input validation to enhance security, focusing on techniques like using built-in functions, whitelist approach, and server-side validation.

The article discusses strategies for implementing API rate limiting in PHP, including algorithms like Token Bucket and Leaky Bucket, and using libraries like symfony/rate-limiter. It also covers monitoring, dynamically adjusting rate limits, and hand

The article discusses the benefits of using password_hash and password_verify in PHP for securing passwords. The main argument is that these functions enhance password protection through automatic salt generation, strong hashing algorithms, and secur

The article discusses OWASP Top 10 vulnerabilities in PHP and mitigation strategies. Key issues include injection, broken authentication, and XSS, with recommended tools for monitoring and securing PHP applications.

The article discusses strategies to prevent XSS attacks in PHP, focusing on input sanitization, output encoding, and using security-enhancing libraries and frameworks.

The article discusses the use of interfaces and abstract classes in PHP, focusing on when to use each. Interfaces define a contract without implementation, suitable for unrelated classes and multiple inheritance. Abstract classes provide common funct


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Dreamweaver Mac version
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version
Useful JavaScript development tools