本文实例讲述了基于jquery实现日历签到功能。分享给大家供大家参考。具体如下：
运行效果截图如下：
具体代码如下：
index.html
签到效果实现
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:700;color:#165379;}.singer_r_img.current{background:url(images/sing_sing.gif) no-repeat 0 2px;border:0;text-decoration:none;}.sign table{border-collapse: collapse;border-spacing: 0;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;}
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(); htmls.push(); htmls.push(下月
); htmls.push(上月
); htmls.push(
); htmls.push(
); htmls.push(); htmls.push(); htmls.push(); htmls.push( + mymonth[0][0] + ); htmls.push( + mymonth[0][1] + ); htmls.push( + mymonth[0][2] + ); htmls.push( + mymonth[0][3] + ); htmls.push( + mymonth[0][4] + ); htmls.push( + mymonth[0][5] + ); htmls.push( + mymonth[0][6] + ); htmls.push(
); var d, w; for (w = 1; w < 7; w++) { htmls.push(); for (d = 0; d < 7; d++) { var ifhassigned = calutil.ifhassigned(signlist,mymonth[w][d]); console.log(ifhassigned); if(ifhassigned){ htmls.push( + (!isnan(mymonth[w][d]) ? mymonth[w][d] : ) + ); } else { htmls.push( + (!isnan(mymonth[w][d]) ? mymonth[w][d] : ) + ); } } htmls.push(
); } htmls.push(
); htmls.push(
); htmls.push(
); return htmls.join(''); }};
希望本文所述对大家学习javascript程序设计有所帮助。