`
uule
  • 浏览: 6351610 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

基于jquery实现日历签到功能

 
阅读更多

使用Jquery实现每日签到功能

基于jquery实现日历签到功能

jquery记事日历插件e-calendar

 

思路：

1、获取当月第一天是周几

2、获取当月共几天

通过获取下月的第0天，即是当月最后一天日期

3、通过二维数组构造当月日历

4、将获取到的日期第一天在日历中展示..

 

知识点：

1、JS获取当月的天数

getDate() 方法可返回月份的某一天，返回值是 1 ~ 31 之间的一个整数。

var d = new Date()

document.write(d.getDate())

输出：17

 

getDay() 方法可返回表示星期的某一天的数字，返回值是 0（周日） 到 6（周六） 之间的一个整数。

var d=new Date()

document.write(d.getDay())

输出：3

 

var d = new Date();

//d.getMonth()+1代表下个月，月份索引从0开始，即当前月为6月时，getMonth()返回值为5，创建日期时同理

 

//此处构造的日期为下个月的第0天，天数索引从1开始，第0天即代表上个月的最后一天

var curMonthDays = new Date(d.getFullYear(), (d.getMonth()+1), 0).getDate();

alert("本月共有 "+ curMonthDays +" 天");

 

2、构造当月日历二维数组

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

 获取当月第一天是周几：

var dCalDate = new Date(iYear, iMonth - 1, 1);  
var iDayOfFirst = dCalDate.getDay();

 获取当月共几天：

getDaysInmonth : function(iMonth, iYear){
   var dPrevDate = new Date(iYear, iMonth, 0);
   return dPrevDate.getDate();
  }

 3、构造当月日历HTML

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' 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 < 6; 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("</div>");
   htmls.push("</div>");
   return htmls.join('');
  }

 

4、控件的事件处理机制

指定一个默认的eventName:"load"，不同的事件定义不同的eventName

默认时：

eventName:"load",
  //初始化日历
  init:function(signList){
    calUtil.setMonthAndDay();
    calUtil.draw(signList);
    calUtil.bindEnvent();
  },

 

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;
    }
  },

 不同的事件触发：

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

 

 

 

效果图：


页面引用：

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>签到效果实现</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/sign.css"/>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript">
$(function(){
  //ajax获取日历json数据
  var signList=[{"signDay":"09"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
   calUtil.init(signList);
});
</script>
</head>
<body>
	
<div style="width:300px;height:300px;" id="calendar">
</div>
</body>
</html>

 JS：

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("<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' 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 < 6; 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("</div>");
   htmls.push("</div>");
   return htmls.join('');
  }
};

 ..

 

 

 

 


 

  • 大小: 12.8 KB
分享到：
| Android快速开发工具类
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery实现日历签到功能的特效源码.zip

    在本资源中，"jQuery实现日历签到功能的特效源码.zip" 是一个包含用于创建日历签到功能的JavaScript库，特别是基于jQuery的实现。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax...

    jQuery简单日历每日签到功能代码.zip

    下面我们将详细探讨jQuery日历签到功能的关键知识点： 1. **jQuery库**：jQuery是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。在这个项目中，使用的是jQuery的1.8.3版本，它提供了...

    jQuery日历签到插件

    jQuery日历签到插件是一种常见的前端开发工具，主要用于实现网页上的日期选择和签到功能。这类插件基于流行的JavaScript库jQuery，结合HTML5和CSS3技术，为用户提供直观、友好的交互体验。在HTML5的环境下，可以利用...

    jQuery的日历签到插件每日签到页面代码.zip

    &lt;div class="current-date"&gt;2016年1月6日 我的签到 jQuery日历签到插件是一款非常漂亮美观带日历的每日签到页面代码。

    jquery日历签到插件

    **jQuery日历签到插件详解** 在网页应用中，日历组件经常被用来处理日期相关的操作，如日期选择、事件记录、日程安排等。jQuery日历签到插件是一种方便用户进行日期选择和签到操作的工具，它简化了前端开发中的日期...

    jquery每日签到日历插件`

    总结，jQuery每日签到日历插件是结合了前端开发技术与用户体验设计的产物，它利用jQuery的便利性和灵活性，实现了用户友好的签到功能，同时提供了丰富的自定义选项以适应不同的项目需求。通过学习和掌握这些知识点，...

    jquery每日签到日历插件

    在Web开发中，用户互动性和用户体验是至关重要的因素，而签到功能则是提升用户粘性的一种常见手段。"jQuery每日签到日历插件"便是为此目的而设计的工具，它能够帮助开发者轻松地在网站上实现一个美观、易用的日历...

    jQuery简洁的日历签到插件.zip

    在网页开发中，日历签到功能是一项常见且实用的需求，尤其在管理、记录用户行为或者提供时间选择的场景下。jQuery作为一款广泛使用的JavaScript库，提供了丰富的插件来简化这类任务。今天我们将深入探讨“jQuery简洁...

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

    从给定文件的内容来看，本文主要介绍了如何使用PHP、MySQL和jQuery来实现一个日历签到功能。日历签到功能在网站开发中是一种常见的用户互动方式，通过该功能可以记录用户每天的签到信息，并可能根据签到情况来奖励...

    jquery 日历签到 html5

    在这个“jquery 日历签到 html5”的项目中，开发者使用jQuery和HTML5来创建了一个简单而实用的日历签到功能，适用于手机页面。这个功能允许用户在特定日期上进行签到，并可以显示连续签到的情况。 首先，我们需要...

    jQuery日历签到插件每日签到页面代码.zip

    2. **js** 文件夹：此文件夹包含JavaScript代码，特别是与jQuery日历签到功能相关的脚本。这些脚本可能包括初始化日历，处理用户点击事件，以及更新签到状态等功能。开发者可能使用`$.fn.extend`来创建一个自定义的...

    jQuery日历每日签到插件下载特效源码.zip

    在网页开发中，日历签到功能已经成为一种常见的用户互动元素，尤其在社交网络、学习平台或者健康管理类应用中，它能够帮助用户追踪和记录日常行为。jQuery作为一款强大的JavaScript库，提供了丰富的API和插件，使得...

    jQuery日历签到勾选代码.zip

    jQuery日历签到勾选代码.zip是一个包含实用特效的压缩包，主要涉及jQuery库与CSS样式，用于实现网页上的日历签到功能。这个代码示例不仅能够正常运行，还支持二次开发，允许用户根据自己的需求进行定制和修改，以...

    jquery移动端日历日期签到蓝白主题色简约美观

    在移动应用开发中，日历签到功能是一个常见的需求，特别是在需要用户持续参与或记录活动的应用中。"jquery移动端日历日期签到蓝白主题色简约美观" 是一个专为移动设备设计的日历插件，它提供了优雅的用户体验，同时...

Magicbox
Global site tag (gtag.js) - Google Analytics