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> 已達標,獲取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包網上可以下載。
本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場