jQuery簡單入門的日曆簽到插件

工具/原料

adobe dreamweaver

方法/步驟

新建html文檔。

書寫html文檔。

<div style="" id="calendar"></div>

<div id="sign_note" style="text-align:center;position: relative;padding: 15px;    font-size: 14px;">

<span style="color:red;">*規則：本月簽到21天即可領取獎品</span>

</div>

書寫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 div { 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 div:last-child { border-right: 1px solid #e3e3e3; }

.sign_equal .sign_row:last-child div { 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; }

書寫js。

<script type="text/javascript">

$(function(){

//ajax獲取日曆json數據

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

calUtil.init(signList);

});

</script>

書寫並引用calendar2.js。

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

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){

console.log(signList);

if(signList.length > 21){

$("#sign_note").empty();

$("#sign_note").html('<button class="sign_contener" type="button"><i class="fa fa-calendar-check-o" aria-hidden="true"></i>&nbsp;已達標，獲取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_record").click(function(){

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("<div class='sign_main' id='sign_layer'>");

htmls.push("<div class='sign_succ_calendar_title'>");

htmls.push("<div class='calendar_month_span'></div>");

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

htmls.push("<div class='sign_equal' id='sign_cal'>");

htmls.push("<div class='sign_row'>");

htmls.push("<div class='th_1 bold'>" + myMonth[0][0] + "</div>");

htmls.push("<div class='th_2 bold'>" + myMonth[0][1] + "</div>");

htmls.push("<div class='th_3 bold'>" + myMonth[0][2] + "</div>");

htmls.push("<div class='th_4 bold'>" + myMonth[0][3] + "</div>");

htmls.push("<div class='th_5 bold'>" + myMonth[0][4] + "</div>");

htmls.push("<div class='th_6 bold'>" + myMonth[0][5] + "</div>");

htmls.push("<div class='th_7 bold'>" + myMonth[0][6] + "</div>");

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

var d, w;

for (w = 1; w < 6; w++) {

htmls.push("<div 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("<div class='td_"+d+" on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>");

} else {

htmls.push("<div class='td_"+d+" calendar_record'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>");

}

}

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

}

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

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

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

return htmls.join('');

}

};

引用js包，<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>。

網頁中整體代碼圖如下。

注意事項

jquery-1.8.1.min.js是js包網上可以下載。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場