calendar.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 < 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("</div>");

      htmls.push("</div>");

      return htmls.join('');

    }

};

sign.css

.singer_r_img{display:block;width:114px;height:52px;line-height:45px;background:url(images/sing_week.gif) right 2px no-repeat;vertical-align:middle;*margin-bottom:-10px;text-decoration:none;}

.singer_r_img:hover{background-position:right -53px;text-decoration:none;}

.singer_r_img span{margin-left:14px;font-size:16px;font-family:'Hiragino Sans GB','Microsoft YaHei',sans-serif !important;font-weight:;color:#165379;}

.singer_r_img.current{background:url(images/sing_sing.gif) no-repeat 0 2px;border:;text-decoration:none;}

.sign table{border-collapse: collapse;border-spacing:;width:100%;}

.sign th,.sign td {width: 30px;height: 40px;text-align: center;line-height: 40px;border:1px solid #e3e3e3;}

.sign th {font-size: 16px;}

.sign td {color: #404040;vertical-align: middle;}

.sign .on {background-color:red;}

.calendar_month_next,.calendar_month_prev{width: 34px;height: 40px;cursor: pointer;background:url(images/sign_arrow.png) no-repeat;}

.calendar_month_next {float: right;background-position:-42px -6px;}

.calendar_month_span {display: inline;line-height: 40px;font-size: 16px;color: #656565;letter-spacing: 2px;font-weight: bold;}

.calendar_month_prev {float: left;background-position:-5px -6px;}

.sign_succ_calendar_title {text-align: center;width:398px;border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;background:#fff;}

.sign_main {width: 400px;border-top:1px solid #e3e3e3;font-family: "Microsoft YaHei",SimHei;}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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="jquery-1.8.2.min.js"></script>

<link rel="stylesheet" type="text/css" href="sign.css"/>

<script type="text/javascript" src="calendar.js"></script>

<script type="text/javascript">

$(function(){

    //ajax获取日历json数据

    var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];

      calUtil.init(signList);

});

</script>

</head>

<body>

<div style="width:300px;height:300px;" id="calendar"></div>

</body>

</html>

最后实现的效果

jquery日历签到控件的实现的更多相关文章

  1. 移动端日历选择控件（支持Zepto和JQuery）

    移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...

  2. [习题]日历(Calendar)控件的障眼法（.Visible属性），使用时才出现？不用就消失？

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/09/02/calendar_icon_visible.aspx [习题]日历(Cal ...

  3. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  4. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  5. 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  6. 模仿win10样式，基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

  7. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  8. 弹出框页面中使用jquery.validate验证控件

    弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...

  9. 使用Uploadify 时，同时使用了jQuery.Validition 验证控件时，在IE11上出现JS缺少对象错误。

    场景: 使用jQuery.1.8.2 使用 Uploadify 3.2上传控件 使用jQuery.Validition 1.9 验证 使用IE 11 时,当鼠标点击上传按钮时,会出现JS 缺少对象错误 ...

随机推荐

  1. Java泛型的一点用法（转）

    1.一个优秀的泛型,建议不要这样写public static <K, V> Map<K, V> getMap(String source, String firstSplit, ...

  2. mysqli 启动出错

    innodb_buffer_pool_size = 512M  配置问题 /usr/local/mysql/bin/mysqld_safe --relay-log nor --relay-log-in ...

  3. php抽象类和接口

    接口 使用接口,你可以指定某个类必须实现那些方法,但是不需要定义这些方法的具体内容,我们可以通过interface来定义一个接口,就像定义标准类一样,但其中定义所有的方法都是空的,接口中定义的所有的方 ...

  4. sae上屏蔽错误显示并查看错误日志

    首先应用上线之前肯定要屏蔽错误显示的, 登录sae,点进去你的应用, 关闭之后进入日志管理当前的当前版本 在http中可以查看各个级别的日志记录了

  5. iOS 面试题:OC基本概念题

    1.什么是类和对象? 类是一组具有同样特征和功能的事物的抽象 对象描写叙述了一个物体的特征和行为实现 类是对象的抽象 对象是类的实例 2.OC中定义类,创建对象,使用对象. OC中定义类分为接口部分, ...

  6. MYSQL++之Connect类型

    原文转自:www.cnblogs.com/aicro mysqlpp:: Connect类型主要负责连接事宜,这是在所有开始mysql操作之前必须进行的(这是句废话). 该类型的主要的结果如下所示 m ...

  7. ios开发学习笔记（1）

    objective-c基础总结 第一二章 1.application:didiFinishLauchingWithOptions:程序启动后立即执行 2.启动界面代码格式:self.window = ...

  8. iOS实践02

    第二天了,上了一天课,软件测试.数据挖掘.概率论,晚上了才有时间捣鼓捣鼓程序. 今天只是简单的做了一点.觉得自己思考的写不出来,只能简单的写一个过程,不像第一次写这个,少了很多思考的. 1.完善tab ...

  9. ExtJS001HelloWorld弹窗

    html页面 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  10. Android应用开发提高篇（3）-----传感器（Sensor）编程

    链接地址:http://www.cnblogs.com/lknlfy/archive/2012/02/29/2373420.html 一.概述 Android支持的传感器种类越来越多了,这确实是一件可 ...