本文主要和大家分享jQuery实现日历每日签到网页特效，主要以代码的形式和大家分享，希望能帮助到大家。
index.html
代码：
nbsp;html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">jQuery简洁的日历签到插件 $(function(){ //ajax获取日历json数据 var signList=[{"signDay":"09"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}]; calUtil.init(signList);});*规则：本月签到21天即可领取奖品
登录后复制
calendar2.js
var calUtil = { //当前日历显示的年份 showYear:2015, //当前日历显示的月份 showMonth:1, //当前日历显示的天数 showDays:1, eventName:"load", //初始化日历 init:function(signList,s=''){ calUtil.setMonthAndDay(); if (typeof(s) == 'undefined'){ }else{ signList.splice('','',s); } calUtil.draw(signList); calUtil.bindEnvent(signList); }, draw:function(signList){ //绑定日历 //alert(signList.length); console.log(signList); if(signList.length > 21){ //alert(21); $("#sign_note").empty(); $("#sign_note").html(''); } 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(signList){ // //绑定上个月事件 // $(".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); // }); $(".calendar_record").click(function(){ //ajax获取日历json数据 //alert(typeof(signList)+"yxy"); //var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}]; //var tmp = {"signDay":$(this).html()}; //if (typeof(signList) == 'undefined'){ //不做处理 //}else{ // signList.splice('','',tmp); // console.log(signList); // calUtil.init(signList); // } //alert($(this).html()); var tmp = {"signDay":$(this).html()}; calUtil.init(signList,tmp); }); }, //获取当前选择的年月 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 "); 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 "); for (d = 0; d " + (!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(''); }};
登录后复制
sign2.css
.singer_r_img {display: block;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_succ_calendar_title {text-align: center;/*width: 398px;*/border-left: 1px solid #e3e3e3;border-right: 1px solid #e3e3e3;background: #fff;}.sign_main {/*width: 400px;*//**background-color: #FBFEFE;**/border-top: 1px solid #e3e3e3;font-family: "Microsoft YaHei",SimHei;display: block;}.calendar_month_span {display: inline;line-height: 40px;font-size: 16px;color: #656565;letter-spacing: 2px;font-weight: bold;}.sign_equal {display:table;border-collapse:separate;width: 100%;}.sign_row {display:table-row;}.sign_row p {display:table-cell;width:14.3%;border-top: 1px solid #e3e3e3;/*border-bottom: 1px solid #e3e3e3;*/border-left: 1px solid #e3e3e3;height: 40px; text-align: center; line-height: 40px;}.sign_row .bold{font-weight: bold;}.sign_row p:last-child { border-right: 1px solid #e3e3e3;}.sign_equal .sign_row:last-child p{border-bottom: 1px solid #e3e3e3;}.sign_equal .on {background: url(../images/sign_have.gif) no-repeat center;}.sign_contener,.sign_contener:visited {line-height: 30px;background: #00a0e9;border: none;color: white;border-radius: 30px;padding: 0 10px;font-size: 16px;}.sign_contener:hover{background-color: red;}
登录后复制
相关推荐：
关于日历签到的文章推荐
php+mysql+jquery实现日历签到
基于jquery实现日历签到功能_jquery
以上就是jQuery实现日历每日签到网页特效的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2780018.html
