本文主要和大家分享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+jquery实现日历签到
基于jquery实现日历签到功能_jquery
以上就是jquery实现日历每日签到网页特效的详细内容。