效果展示：

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/[email protected]" 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/
 
[email protected]" 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/
 
[email protected]');
			setTimeout(function(){
				$('#nowday').addClass('yqd');
				alert("恭喜您，簽到成功");
			},500);		
		}else {
			alert('親，您已經簽過到了！')
		}
	});
});	
</script>

下載完整原始碼：點選這裡