ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery はカレンダーの毎日のサインイン Web ページの特殊効果を実装します
この記事は主に、カレンダーの毎日のサインイン Web ページの特殊効果を実装するための jQuery をコードの形式で共有します。
index.html
コード:
<!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>jQuery简洁的日历签到插件 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/sign2.css"> <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="js/calendar2.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> <p style="" id="calendar"></p> <p id="sign_note" style="text-align:center;position: relative;padding: 15px; font-size: 14px;"> <span style="color:red;">*规则:本月签到21天即可领取奖品</span> </p> </body> </html>
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('<button class="sign_contener" type="button"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 已达标,获取1次抽奖</button>'); } 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 < 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("<p class='sign_main' id='sign_layer'>"); htmls.push("<p class='sign_succ_calendar_title'>"); //htmls.push("<p class='calendar_month_next'>下月</p>"); //htmls.push("<p class='calendar_month_prev'>上月</p>"); htmls.push("<p class='calendar_month_span'></p>"); htmls.push("</p>"); htmls.push("<p class='sign_equal' id='sign_cal'>"); htmls.push("<p class='sign_row'>"); htmls.push("<p class='th_1 bold'>" + myMonth[0][0] + "</p>"); htmls.push("<p class='th_2 bold'>" + myMonth[0][1] + "</p>"); htmls.push("<p class='th_3 bold'>" + myMonth[0][2] + "</p>"); htmls.push("<p class='th_4 bold'>" + myMonth[0][3] + "</p>"); htmls.push("<p class='th_5 bold'>" + myMonth[0][4] + "</p>"); htmls.push("<p class='th_6 bold'>" + myMonth[0][5] + "</p>"); htmls.push("<p class='th_7 bold'>" + myMonth[0][6] + "</p>"); htmls.push("</p>"); var d, w; for (w = 1; w < 6; w++) { htmls.push("<p class='sign_row'>"); for (d = 0; d < 7; d++) { var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]); console.log("001:"+ifHasSigned); if(ifHasSigned && typeof(myMonth[w][d]) != 'undefined'){ htmls.push("<p class='td_"+d+" on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>"); } else { htmls.push("<p class='td_"+d+" calendar_record'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>"); } } htmls.push("</p>"); } htmls.push("</p>"); htmls.push("</p>"); htmls.push("</p>"); 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+jに問い合わせるカレンダーチェックインの実装
jquery_jqueryをベースにしたカレンダーチェックイン機能の実装
以上がjQuery はカレンダーの毎日のサインイン Web ページの特殊効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。