jQuery实现日历效果
本文实例为大家分享了jQuery实现日历效果的具体代码,供大家参考,具体内容如下
jquery是用的是2.0版本。
1、html代码
显示详细签到详情
2、以下是mycanledar.js的代码
//JavaScriptDocument varnstr=newDate();//获取当前日期 varchangedYear=nstr.getFullYear();//年份 varchangedMonth=nstr.getMonth();//月份 vardnow=nstr.getDate();//今日日期 varn1str=newDate(changedYear,changedMonth,1);//当月第一天Date varinitfirstday=n1str.getDay();//当月第一天星期几 vardaynumber=getMonthAllDay(changedMonth,changedYear); showCanledar(changedMonth,initfirstday,dnow,daynumber); reloadyear(); reloadmonth(1); functionreloadyear(){ varinitYearSelect=$("#currentyearoption"); initYearSelect.each(function(){ if($(this).val().substring(0,4)==changedYear){ $(this).attr("selected",true); } }); } functionreloadmonth(isinit){ varinitMonthSelect=$("#currentmonthoption"); initMonthSelect.each(function(){ if(isinit==1){ if($(this).index()==changedMonth){ $(this).attr("selected",true); } }else{ if($(this).index()==changedMonth-1){ $(this).attr("selected",true); } } }); } //是否为闰年 functionis_leap(year){ return(year%100==0?res=(year%400==0?1:0) :res=(year%4==0?1:0)); } //获得下拉列表的年 functiongetNewYear(){ //alert("得到年"); return$("#currentyearoption:selected").text().substring(0,4); } //获得下拉列表的月 functiongetNewMonth(){ //alert("得到月"); return$("#currentmonthoption:selected").text(); } //获取当月的天数 functiongetMonthAllDay(month,year){ varm_days=newArray(31,28+is_leap(year),31,30,31,30,31,31,30, 31,30,31); returnm_days[month]; } //获得某年某月某日是星期几 functiongetFirstWeekDay(year,month,day){ vardate=newDate(); date.setFullYear(year); date.setMonth(month); date.setDate(day); returndate.getDay(); } //获得表格行数 functionrequiredRows(allday,firstday){ vartrstr=Math.ceil((allday+firstday)/7); //alert("trstr"+trstr); returntrstr; } /*显示日历*/ functionshowCanledar(month,firstday,dnow,allday){ varrows=requiredRows(allday,firstday); vartb=""; tb+=" "; tb+=" "; tb+=" "; tb+=""; tb+=" "; tb+=" 日 一 二 三 四 五 六 "; tb+=""; for(vari=0;i"; for(vark=0;k<7;k++){//表格每行的单元格 varidx=i*7+k;//单元格自然序列号 vardate_str=idx-firstday+1;//计算日期 (date_str<=0||date_str>allday)?tb+=" " :tb+=" "+date_str+" ";//过滤无效日期(小于等于零的、大于月总天数的) //打印日期:今天底色为红 //查询月签到情况 } tb+=""; //表格的行结束 } tb+="";//表格结束 $(".signincalendar").html(tb); } /**改变年后触发事件,jquery1.9版本废除了live()方法,使用on代替**/ varreg=newRegExp("^[0-9]*$"); $(function(){ $(document).on('change','#currentyear',function(){ changedYear=getNewYear(); changedMonth=getNewMonth(); commChanged(); reloadyear(); reloadmonth(0); }); $(document).on('change','#currentmonth',function(){ changedMonth=getNewMonth(); commChanged(); reloadyear(); reloadmonth(0); }); }); functioncommChanged(){ varfirstweekday=getFirstWeekDay(changedYear,parseInt(changedMonth)-1, 1); //alert("firstweekday="+firstweekday); varallday=getMonthAllDay(parseInt(changedMonth)-1,changedYear); //alert("allday="+allday); showCanledar(changedMonth,firstweekday,9,allday); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。