效果介绍
日历在手机软件里是非常常见的一个功能，几乎每一个手机都有一个自带的手机日历软件。签到功能也是特别常用的，学习通、淘宝、包括学校使用的热水软件U易也都有运用。在一些签到获取积分（或者其他奖励）的软件中，签到和日历功能常常是捆绑使用。我们今天要实现的也是签到功能和日历捆绑在一起的效果。
本次的实现效果如下图1.1：
图1.1 实现效果
分析实现步骤
从图1.1的效果中可以看出。关于日历我们需要实现的效果有：①判断某一天是星期几；②判断某个月有几天；③判断某一年是平年还是闰年（即二月份是28天还是29天）；
关于签到需要实现的更多的是样式的变化：①点击签到之后，签到按钮要发生变化，从签到变成已签到；②当签到成功后，页面利用模态框显示“签到成功字样”，如图2.1所示；③当签到成功后日历中对应的日期要发生相应的样式变化；
图2.1 签到成功效果图
实现过程
概述实现步骤：①创建相应的文件，并在HTML5中引入；②利用HTML5代码对页面框架进行搭建；③利用css对“签到”前后样式变化进行调整；④利用JavaScript对日历进行实现；
关于日历功能实现的具体步骤：
（1）利用HTML5代码对页面框架进行搭建：
div>
<div>
<div>
<div class="col-xs-2 addre"><a onclick="javascript:history.back(-1)"><img src="images/jiantou@w.png" alt="返回" /></a></div>
<div class="col-xs-8 tittext"></div>
<div class="col-xs-2 othmore"></div>
</div>
</div>
<div>
<div data-state="0"><img src="images/weiqiandao@2x.png" alt=""></div>
<p>总积分666名内可领取666积分</p>
</div>
</div>
<div>
<div><span></span>本月签到记录<span class="dian rt"></span></div>
<div>
<div><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
（2）样式设置，根据效果对样式进行调整（代码省略）
（3）判断某一天是星期几，可以先判断某个月的天数，再判断某月的第一天是星期几，后面的天数依次罗列就可得出。
$(function(){
var nowdate = new Date(); //当前日期
var days = new Date(nowdate.getFullYear(), (nowdate.getMonth() + 1), 0).getDate(); //本月天数
var deforedays = new Date(nowdate.getFullYear(), (nowdate.getMonth()), 0).getDate(); //上月天数
var month = nowdate.getMonth() + 1,
date = nowdate.getDate(),
week = nowdate.getDay();
var firstday = new Date(); //本月第一天的日期
firstday.setDate(1);
var firstdayweek = firstday.getDay(); //本月第一天星期几
console.log('今天是' + month + '月' + date + '日，星期' + week);
console.log(firstdayweek)
//判断星期
$('.rl-main .week span').each(function(index,item){
if(index == week){
$('.rl-main .week span').removeClass('active');
$(this).addClass('active');
}
});
（4）在利用上述代码判断清楚日期之后，就可以生成相应的日历表格。代码如下：
var dayinfo = '',
num = 0,
numaft = 0;
for(var i = 1; i <= 6; i ++){
dayinfo += '<div>'
for(var j = 1; j <= 7; j++){
if(i == 1 && j == 1){
for(var beforeday = firstdayweek-1; beforeday >=0; beforeday --){
dayinfo += '<span>';
dayinfo += Number(deforedays - beforeday);
dayinfo += '</span>'
}
}else if(i == 1 && j > firstdayweek){
if(num == date-1){
dayinfo += '<span id="nowday">' + (++ num) + '</span>'
}else {
dayinfo += '<span>' + (++ num) + '</span>' }
}else if(i > 1 ) {
if(num == days){
dayinfo += '<span>' + (++ numaft) + '</span>'
}else {
if(num == date-1){
dayinfo += '<span id="nowday">' + (++ num) + '</span>'
}else {
dayinfo += '<span>' + (++ num) + '</span>'
} } } }
dayinfo += '</div>' }
$('.rl-main .week').after(dayinfo)
console.log(dayinfo);
（5）最后就是实现签到之后在对应的日期显示相应的效果，包括对应的样式和模态框。代码如下：
//签到功能
$('.sign-bg .sign-btn .sig-bt').click(function(){
var state = $(this).attr('data-state');
if(state == 0){
$(this).attr('data-state','1');
$(this).addClass('rotate');
$(this).children('img').attr('src','images/yiqiandao@2x.png');
setTimeout(function(){
$('#nowday').addClass('yqd');
alert("恭喜您，签到成功");
},500);
}else {
alert('亲，您已经签过到了！')
}
});
});
END实习主编 | 王楠岚
责 编 | 刘 连
where2go 团队
微信号：算法与编程之美
