效果介绍
日历在手机软件里是非常常见的一个功能，几乎每一个手机都有一个自带的手机日历软件。签到功能也是特别常用的，学习通、淘宝、包括学校使用的热水软件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('亲，您已经签过到了！') } }); }); |
