jQuery实现日历每日签到网页特效

来源：动视网责编：小采时间：2020-11-27 19:58:41

jQuery实现日历每日签到网页特效

jQuery实现日历每日签到网页特效:本文主要和大家分享jQuery实现日历每日签到网页特效，主要以代码的形式和大家分享，希望能帮助到大家。index.html代码：<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.

推荐度：

点击下载本文 文档为doc格式

导读jQuery实现日历每日签到网页特效:本文主要和大家分享jQuery实现日历每日签到网页特效，主要以代码的形式和大家分享，希望能帮助到大家。index.html代码：<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.

本文主要和大家分享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;
}

jQuery实现日历每日签到网页特效

推荐度：

点击下载本文 文档为doc格式

标签：签到日历特效

热门焦点

jQuery实现日历每日签到网页特效

jQuery实现日历每日签到网页特效

jQuery实现日历每日签到网页特效

最新推荐

猜你喜欢

热门推荐