js--手机端签到日历

效果展示：

html代码

<div class="sign-bg"> 
  <!-- header -->
  <div class="header">
    <div class="row">
      <div class="col-xs-2 addre">
        <a class="down-tb" 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 class="sign-btn">
    <div class="sig-bt" data-state="0"><img src="images/weiqiandao@2x.png" alt=""></div>
    <p>总积分730名内可领取20积分</p>
  </div>
</div>
<div class="rili">
  <div class="rltit"><span class="dian"></span>本月签到记录<span class="dian rt"></span>
  </div>
  <div class="rl-main">
    <div class="week"><span>日</span><span>一</span><span>二</span><span>三</span><span class="active">四</span><span>五</span><span>六</span></div>
  </div>
  <div class="rltit"><span class="dian"></span>签到规则<span class="dian rt"></span></div>
  <div class="rl-main gz">
    <div class="item-list"><div class="item">签到一天得5积分</div>
    <div class="item">从第八天开始签到给5积分</div>
    <div class="item">每周日签到得10积分</div>
    <div class="item">如果中间间断则按正常10积分</div>
    <div class="item">每月第一周签到7天</div></div>
  </div>
</div>

js代码

<script type="text/javascript">
$(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');
		}
	});
	//生成日历
	var dayinfo = '',
		num = 0,
		numaft = 0;
	for(var i = 1; i <= 6; i ++){
		dayinfo += '<div class="day">'
		for(var j = 1; j <= 7; j++){
			if(i == 1 && j == 1){
				for(var beforeday = firstdayweek-1; beforeday >=0; beforeday --){
					dayinfo += '<span class="before">';
					dayinfo += Number(deforedays - beforeday);
					dayinfo += '</span>'
				}
			}else if(i == 1 && j > firstdayweek){
				if(num == date-1){
					dayinfo += '<span class="active" id="nowday">' + (++ num) + '</span>'
				}else {
					dayinfo += '<span>' + (++ num) + '</span>'
				}
				
			}else if(i > 1 ) {
				if(num == days){
					dayinfo += '<span class="before">' + (++ numaft) + '</span>'
				}else {
					if(num == date-1){
						dayinfo += '<span class="active" id="nowday">' + (++ num) + '</span>'
					}else {
						dayinfo += '<span>' + (++ num) + '</span>'
					}
				}
			}
		}
		dayinfo += '</div>'
	}
	$('.rl-main .week').after(dayinfo)
	console.log(dayinfo);
	//签到功能
	$('.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('亲，您已经签过到了！')
		}
	});
});	
</script>

下载完整源代码：点击这里