在网站开发过程中我们会经常用到签到功能来奖励用户积分，或者做一些其他活动。这次项目开发过程中做了日历签到，因为没有经验所有走了很多弯路，再次记录过程和步骤。
1.日历签到样式：使用的是calendar日历插件
<!doctype html> <html> <head> <meta charset="utf-8"> <title>日历签到</title> <meta name="keywords" content="日历签到"/> <meta name="description" content="日历签到"/> <meta content="telephone=no" name="format-detection" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <link href="__TPL__/css/index.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="__TPL__/css/main.css"> <link rel="stylesheet" type="text/css" href="__TPL__/css/self.css"> <link rel="stylesheet" type="text/css" href="__TPL__/css/swiper.min.css"> </head> <body style="background:#fff;"> <div class="warpper"> <div class="sign"> <ul> <li><span>本月签到</span><b><?if(is_array($sign)){echo count($sign);}else{echo '0';}?></b></li> <li><span>签到累计</span><b><?php if(is_array($allsign)){echo count($allsign);}else{echo '0';}?></b></li> <li><span>累计积分</span><b><?php if(is_array($allsign)){echo count($allsign)*$config['site_praise'];}else{echo '0';}?></b></li> <li><span>全部积分</span><b><?php echo ceil($user['integral']);?></b></li> </ul> </div> <input type="hidden" name="" value="__URL__/checksign.html" id="sign"> <div class="singBox" id="calendar"></div> <div class="qdbox"><a href="javascript:;" class="qd_btn" onclick="sign_()" style="background: <?php echo is_sign_now()?'':'rgb(135, 135, 135)'; ?>" ><?php echo is_sign_now()?'签到':'已签到'; ?></a></div> <script src="__TPL__/js/jquery.min.js"></script> <script src="__TPL__/js/swiper.min.js"></script> <script src="__TPL__/js/calendar.js"></script> <script src="__TPL__/js/js.js"></script> <script type="text/javascript" src="__TPL__/js/layer/2.1/layer.js"></script> {include file="footer"} <script type="text/javascript"> $(function(){ var arr=''; //var signList=[{"signDay":"09"},{"signDay":"11"}]; <?php if(is_array($sign)){ foreach($sign as $vo){ ?> arr+="{'signDay':'<?php echo $vo['day'];?>'},"; <?php }?> arr = arr.substr(0,arr.length-1); arr ="["+arr+"]"; var signList = eval('(' + arr + ')'); <?php }else{?> var signList=[]; <?php }?> calUtil.init(signList); }); </script> <script type="text/javascript"> function sign_(){ $.ajax({ type:'GET', url:"__URL__/checksign.html", dataType:'json', success:function(res){ if(res.result==1){ window.location.href="__URL__/sign.html" }else{ alert(res.msg); } } }) } </script>
插件calendar.js 修改如下：
var calUtil = { //当前日历显示的年份 showYear:2015, //当前日历显示的月份 showMonth:1, //当前日历显示的天数 showDays:1, eventName:"load", //初始化日历 init:function(signList,s=''){ calUtil.setMonthAndDay(); if (typeof(s) == 'undefined'){ }else{ signList.splice('','',s); } calUtil.draw(signList); calUtil.bindEnvent(signList); }, draw:function(signList){ //绑定日历 //alert(signList.length); // console.log(signList); if(signList.length > 21){ //alert(21); $("#sign_note").empty(); $("#sign_note").html('<button class="sign_contener" type="button"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 已达标，获取1次抽奖</button>'); } 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(signList){ // //绑定上个月事件 // $(".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); // }); $(".calendar_record").click(function(){ //ajax获取日历json数据 // console(typeof(signList)+"yxy"); //var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}]; //var tmp = {"signDay":$(this).html()}; //if (typeof(signList) == 'undefined'){ //不做处理 //}else{ // signList.splice('','',tmp); // console.log(signList); // calUtil.init(signList); // } //alert($(this).html()); var tmp = {"signDay":$(this).html()}; console.log(tmp.signDay) // if(tmp.signDay==11){ //执行签到 $.ajax({ type:'POST', url:"checksign.html", data:{day:tmp.signDay}, dataType:'json', success:function(res){ // if(res.result==1){ // calUtil.init(signList,tmp); // }else{ alert(res.msg); location.reload(true); // } } }) // }else{ // alert("请签到当天日期") // } }); }, //获取当前选择的年月 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("<div class='sign_main' id='sign_layer'>"); htmls.push("<div class='sign_succ_calendar_title'>"); //htmls.push("<div class='calendar_month_next'>下月</div>"); //htmls.push("<div class='calendar_month_prev'>上月</div>"); htmls.push("<div class='calendar_month_span'></div>"); htmls.push("</div>"); htmls.push("<div class='sign_equal' id='sign_cal'>"); htmls.push("<div class='sign_row'>"); htmls.push("<div class='th_1 bold'>" + myMonth[0][0] + "</div>"); htmls.push("<div class='th_2 bold'>" + myMonth[0][1] + "</div>"); htmls.push("<div class='th_3 bold'>" + myMonth[0][2] + "</div>"); htmls.push("<div class='th_4 bold'>" + myMonth[0][3] + "</div>"); htmls.push("<div class='th_5 bold'>" + myMonth[0][4] + "</div>"); htmls.push("<div class='th_6 bold'>" + myMonth[0][5] + "</div>"); htmls.push("<div class='th_7 bold'>" + myMonth[0][6] + "</div>"); htmls.push("</div>"); var d, w; for (w = 1; w < 6; w++) { htmls.push("<div class='sign_row'>"); for (d = 0; d < 7; d++) { var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]); console.log("001:"+ifHasSigned); if(ifHasSigned && typeof(myMonth[w][d]) != 'undefined'){ htmls.push("<div class='td_"+d+" on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>"); } else { htmls.push("<div class='td_"+d+" calendar_record'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>"); } } htmls.push("</div>"); } htmls.push("</div>"); htmls.push("</div>"); htmls.push("</div>"); return htmls.join(''); } };
PHP代码的实现
//签到（status=1） public function sign(){ //当月累计签到 $sign = $this->model->table('praise')->where('uid='.$_SESSION['user']['uid'].' and time>'.strtotime(date("Y-m-01",time())))->select(); if($sign){ foreach($sign as $k=>$v){ $sign[$k]['day']=date('d',$v['time']); } } //所有签到 $allsign = $this->model->table('praise')->where('uid='.$_SESSION['user']['uid'].' and status=1')->select(); $this->assign('allsign', $allsign); $this->assign('sign', $sign); $this->assign('user', $_SESSION['user']); $this->display('member_sign'); } //点击签到 public function checksign(){ if($_POST['day']){ $day=intval($_POST['day']); }else{ $day=date("d",time()); } if($day!=date("d",time())){ $data['msg']="请在当前日期点击签到"; echo json_encode($data); return; } $condition2 = 'uid='.$_SESSION['user']['uid']; $condition2 .= " AND DATE_FORMAT(FROM_UNIXTIME(time),'%Y-%m-%d') = '".date("Y-m-d",time())."'"; $sign = $this->model->table('praise')->where($condition2)->find(); //判断是否已经签到 if (empty($sign)) { //新增积分 $this->model->table('member')->data('integral=integral+'.$this->config['site_praise'].',allintegral=allintegral+'.$this->config['site_praise'])->where('uid='.$_SESSION['user']['uid'])->update();//增加积分 $arr['subject']="签到赠送积分"; $arr['uid'] = $_SESSION['user']['uid']; $arr['integral'] = $this->config['site_praise']; $arr['time']=time(); $this->model->table('member_integral')->data($arr)->insert(); $updateuser = $this->model->table('member')->where('uid='.$_SESSION['user']['uid'])->find();//购物后更新session积分 $_SESSION['user']['integral'] = $updateuser['integral']; $_SESSION['user']['allintegral'] = $updateuser['allintegral']; $data['uid'] = $_SESSION['user']['uid']; //$data['pid'] = $item; $data['status'] = 1; $data['time'] = time(); $this->model->table('praise')->data($data)->insert(); //$this->model->table('post')->data("digg=digg+1")->where('id='.$id)->update(); //$this->model->table('member_comment')->data("praise=praise+1")->where('id='.$item)->update(); $this->jssuccess('签到成功！'); } else { $this->jserror('已经签过到了。'); } } //判断是否已经签到 function is_sign_now(){ $condition2 = 'uid='.$_SESSION['user']['uid']; $condition2 .= " AND DATE_FORMAT(FROM_UNIXTIME(time),'%Y-%m-%d') = '".date("Y-m-d",time())."'"; $sign = module('common')->model->table('praise')->where($condition2)->find(); //判断是否已经签到 if (empty($sign)) { return true; }else{ return false; } }
扫码二维码 获取免费视频学习资料
- 本文固定链接: http://phpxs.com/post/6250/
- 转载请注明：转载必须在正文中标注并保留原文链接
- 扫码： 扫上方二维码获取免费视频资料