jQuery简单入门的日历签到插件

来源：互联网 2023-03-16 23:54:10 版权归原作者所有，如有侵权，请联系我们

jQuery简单入门的日历签到插件

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

jQuery简单入门的日历签到插件

书写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>

jQuery简单入门的日历签到插件

书写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; }

jQuery简单入门的日历签到插件

3相关内容非法爬取自百度经验

书写js。

script type="text/javascript">

$(function(){

//ajax获取日历json数据

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

calUtil.init(signList);

});

/script>

jQuery简单入门的日历签到插件

书写并引用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>");

return htmls.join('');

}

};

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

网页中整体代码图如下。

jQuery简单入门的日历签到插件

注意事项

jquery-1.8.1.min.js是js包网上可以下载。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JQUERY

上一篇：如何利用jQuery库控制a标签点击变色下一篇：CSS3+jquery导航菜单动画特效

jQuery简单入门的日历签到插件

工具/原料

方法/步骤

注意事项

热门文章

标签列表