本文主要介绍了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['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.后台代码:查询今天是否签到:
$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.查询积分:
/*查询积分*/
$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.签到写入数据库:
/*签到*/
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. /*查询本月签到天数,并以json格式返回*/
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');
}
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关推荐:
php+mysql+jquery实现日历签到
基于jquery实现日历签到功能_jquery
javascript - php+js的日历签到怎么实现
以上就是php+mysql+jquery实现日历签到功能的方法的详细内容。