首页 / JQUERY / php+mysql+jquery实现日历签到功能的方法

php+mysql+jquery实现日历签到功能的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了php+mysql+jquery实现日历签到功能的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7174字，纯文字阅读大概需要11分钟。

内容图文

本文主要介绍了php+mysql+jquery实现日历签到功能的过程与步骤，具有很好的参考价值

在网站开发过程中我们会经常用到签到功能来奖励用户积分，或者做一些其他活动。这次项目开发过程中做了日历签到，因为没有经验所有走了很多弯路，再次记录过程和步骤。

1.日历签到样式：

php+mysql+jquery实现日历签到功能的方法 - 文章图片

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实现日历签到功能的方法 - 文章图片

以上就是本文的全部内容，希望对大家的学习有所帮助。

内容总结

以上是互联网集市为您收集整理的php+mysql+jquery实现日历签到功能的方法全部内容，希望文章能够帮你解决php+mysql+jquery实现日历签到功能的方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/135701.html

来源：【匿名】

【上一篇】PHP+JQUERY操作JSON实例【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【php+mysql+jquery实现日历签到功能的方法】教程文章相关的互联网学习教程文章

Jquery 调用.net WebService 返回Json、XML方法【代码】

由于项目需要，使用前端、手机客户端调用ASP.NET的Webservice来获取信息.所以这段时间重温一下Jquery与Web Serivce，过程中碰到不少问题，也有不少的收获。Service代码 [WebMethod]public string HelloWorld(){return "Hello World";}[WebMethod]public string myMethod(string para){return "Hi," + para;}[WebMethod][ScriptMethod(UseHttpGet = true)]public string myMethod1(string para){return "Hi," + para;} Web端...

JQuery源码解析-JQuery的工具方法(5)【代码】

下面对最后这几个方法进行讲解。　　guid():唯一表示（内部）　　proxy()：改变this指向　　access(): 多功能值操作　　now():当前时间　　swap():css交换（内部） guid：这个属性是对事件进行控制的，例如每次对dom元素进行绑定事件的时候，会通过这个属性进行绑定，这个属性每次自增，产生一个唯一的标示，所以对dom元素进行事件解绑等操作的时候，通过这个属性就可以找到。源码：// A global GUID counter for objectsguid: 1,p...

Jquery获取元素方法

参考：1、http://www.cnblogs.com/lanleiming/p/5201677.html#p2Jquery 获取元素的方法分为两种：jQuery选择器、jQuery遍历函数。a.只需要一种jQuery选择器选择器实例说明#Id$(‘#myId‘)ID选择器：可以获取到ID为“myId”的所有元素，区分大小写　b.多种jQuery选择器组合　　b1.jQuery选择器选择器实例说明.class$(‘.myClass‘)类选择器：可以获取到class为‘myClass’的所有元素element$(‘p‘)获取所有的<p>元素:header$(‘:...

jQuery对象与DOM对象之间的转换方法

什么是jQuery对象？ ---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法这段代码等同于用DOM实现代码： document.getElementById("id").innerHTML; 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错...

jQuery异步框架探究2:jQuery.Deferred方法【图】

(本文针对jQuery1.6.1版本)关于Deferred函数的描述中有一个词是fledged，意为"羽翼丰满的"，说明jQuery.Deferred函数应用应该更成熟。这个函数与jQuery._Deferred函数有密不可分的关系。1 内部实现 Deferred: function( func ) {var deferred = jQuery._Deferred(),failDeferred = jQuery._Deferred(),promise;// Add errorDeferred methods, then and promisejQuery.extend( deferred, {then: function( doneCallbacks, failCallb...

Jquery中each的三种遍历方法

Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(data) { $.each(data, function(n,value) { });}); 1、选择器+遍历$(‘div‘).each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象}); 2、选择器+遍历$(‘div‘).each(function (index,domEle){ index就是索引值 domEle 表示获取遍历每一个dom对象}); 3、更适用的遍历方法 1）先获取某个集合对象2）遍历集合对象的每一个元素...

jQuery clone()方法绑定事件【代码】【图】

先看如下代码： 1 (function ($) {2 3var div = $("<div></div>").css({width: "100px", height: "100px"});4var colors = ["red", "blue", "yellow"];5for (var c = 0; c < colors.length; c++) {6var perDiv = div.clone();7 perDiv.css({8 background: colors[c]9 }); 10 perDiv.click(function () { 11 console.log(colors[c]); 12 }); 13 $("body").append(perDi...

jQuery为动态生成的select元素添加事件的方法

项目中需要在点击按钮时动态生成select元素，为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码1、首先定义全局js变量var strVoucherGroupSelect ="";2、在js中写好获取服务端数据的代码functiongenVoucherGroupSelect(rowID){ return$(strVoucherGroupSelect).attr("id", "sl_"+ rowID).parent().html(); //返回增加ID后的下拉框完整html}functiongetVoucherGroupData(){ $.ajax({ type: "Post",...

黄聪：jquery mobile通过a标签页面跳转后，样式丢失、js失效的解决方法【代码】

问题描述：用ajax跳转的时候，从a.html跳转到b.html后，b.html的css以及js都失效了。解决办法1：将所有的css以及js全部放在div内。原理：由于jqm的ajax跳转的时候，只会把b.html中内的内容加载进dom,而外的代码都不会加载，所以导致在外的js和css都失效了。解决办法1：在header设置全局属性。<script>$.mobile.ajaxEnabled =false;</script>原理：全局禁止jqm使用ajax 原文：http://www.cnblogs.com/huangcong/p/4312895.html

jQuery -- is() 方法【代码】【图】

定义和用法：根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回‘false‘。 ‘‘‘注意：‘‘‘在jQuery 1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true详细说明：　　与其他筛选方法不同，.is() 不创建新的 jQuery 对象。相反，它允许我们在不...

JQuery中each方法实现【代码】【图】

each()函数是基本上所有的框架都提供了的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理。 jQuery和jQuery对象都实现了该方法，对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说：jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。 jQuery.prototyp...

jquery bind 方法一个特点（绑定多个方法到一个dom的某个事件）【代码】

目录： [TOC]jquery bind方法介绍方法声明：bind(type,[data],fn)方法说明：为每一个匹配元素的特定事件(eg:click)绑定一个事件处理器函数。这个事件处理函数会通过参数方式接收到一个事件对象，可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。技巧：多数情况下，可以把事件处理器函数定义为匿名函数。参数意义type (String) : 事件类型。data (Object) : (可选...

[ jquery 过滤器 parent(expr) ] 此方法用于在选择器的基础之上搜索被选元素中符合表达式的父元素【代码】

此方法用于在选择器的基础之上搜索被选元素中符合表达式的父元素取得一个包含着所有匹配元素的唯一父元素的元素集合,你可以使用可选的表达式来筛选:实例:<html lang=‘zh-cn‘> <head> <title>Insert you title</title> <meta http-equiv=‘description‘ content=‘this is my page‘> <meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘> <meta http-equiv="Content-Type" content="text/html; charset=utf-...

jquery 向下遍历DOM用法方法

jquery 向下遍历DOM用法方法1，jQuery children() 方法children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。下面的例子返回每个 <div> 元素的所有直接子元素：实例$(document).ready(function(){ $("div").children();});2，jQuery find() 方法find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。下面的例子返回属于 <div> 后代的所有 <span> 元素：实例$(document).ready(function(...

Jquery getJSON方法分析（一）

准备工作·Customer类 public class Customer{ public int Unid { get; set; } public string CustomerName { get; set; } public string Memo { get; set; } public string Other { get; set; }} ·服务端处理（Json_1.ashx） Customer customer = new Customer { Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);context....

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / php+mysql+jquery实现日历签到功能的方法

php+mysql+jquery实现日历签到功能的方法

内容导读

内容图文

内容总结

内容备注

内容手机端

【php+mysql+jquery实现日历签到功能的方法】教程文章相关的互联网学习教程文章

Jquery 调用.net WebService 返回Json、XML方法【代码】

JQuery源码解析-JQuery的工具方法(5)【代码】

Jquery获取元素方法

jQuery对象与DOM对象之间的转换方法

jQuery异步框架探究2:jQuery.Deferred方法【图】

Jquery中each的三种遍历方法

jQuery clone()方法绑定事件【代码】【图】

jQuery为动态生成的select元素添加事件的方法

黄聪：jquery mobile通过a标签页面跳转后，样式丢失、js失效的解决方法【代码】

jQuery -- is() 方法【代码】【图】

JQuery中each方法实现【代码】【图】

jquery bind 方法一个特点（绑定多个方法到一个dom的某个事件）【代码】

[ jquery 过滤器 parent(expr) ] 此方法用于在选择器的基础之上搜索被选元素中符合表达式的父元素【代码】

jquery 向下遍历DOM用法方法

Jquery getJSON方法分析（一）

JQUERY - 相关标签

MYSQL - 相关标签

PHP - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程