js实现每日签到功能

最新推荐文章于 2024-08-12 15:57:51 发布

xiaosimm

最新推荐文章于 2024-08-12 15:57:51 发布

阅读量2.1w

点赞数 7

文章标签： javascript 每日签到

注：此功能是在借鉴一位前辈的功能上实现的，稍有改动，具体在哪里我又忘了，因为我都是写好了才来博客记录的，所以之前在哪里找的资料没给记住，对不住啦！

不废话，先看效果！

核心js：

var calUtil = {
    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){
    	  var date = new Date(item.signDate);
    	  if(date.getDate() == day) {
    		  signed = true;
    		  return false;
    	  }
      });
      return signed ;
    },
    drawCal : function(iYear, iMonth ,signList) {
      var currentYearMonth = iYear+"年"+iMonth+"月";
      var myMonth = calUtil.bulidCal(iYear, iMonth);
      var htmls = new Array();
      htmls.push("<div class='sign_main' id='sign_layer'>");
      htmls.push("<div class='sign_succ_calendar_title'>");
      htmls.push("<div class='calendar_month_span'>"+currentYearMonth+"</div>");
      htmls.push("</div>");
      htmls.push("<div class='sign' id='sign_cal'>");
      htmls.push("<table class='table'>");
      htmls.push("<tr>");
      htmls.push("<th>" + myMonth[0][0] + "</th>");
      htmls.push("<th>" + myMonth[0][1] + "</th>");
      htmls.push("<th>" + myMonth[0][2] + "</th>");
      htmls.push("<th>" + myMonth[0][3] + "</th>");
      htmls.push("<th>" + myMonth[0][4] + "</th>");
      htmls.push("<th>" + myMonth[0][5] + "</th>");
      htmls.push("<th>" + myMonth[0][6] + "</th>");
      htmls.push("</tr>");
      var d, w;
      for (w = 1; w < 7; w++) {
        htmls.push("<tr>");
        for (d = 0; d < 7; d++) {
          var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
          if(ifHasSigned){
            htmls.push("<td class='on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");
          } else {
            htmls.push("<td>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");
          }
        }
        htmls.push("</tr>");
      }
      htmls.push("</table>");
      htmls.push("</div>");
      htmls.push("</div>");
      return htmls.join('');
    }
};

页面效果代码：

<style type="text/css">
@media screen and (min-width:1024px) {
	.rich_media {
		width: 500px;
		margin-left: auto;
		margin-right: auto;
		padding: 20px;
	}
}
</style>
</head>
<body style="background-color: #fff;">
    <div class="rich_media">
            <div id="page-content">
            	<div style="text-align: center;background-color: #2FAA00;height: 50px;margin-bottom: 20px;">
					<span style="cursor: pointer;font-weight: 600;font-size: 20px;color: #fff;height: 50px;line-height: 50px;">每日签到</span>
					<input type="hidden" id="userId" value="${user.id }" />
			    </div>
			    <div class="container-fluid">
			    	<div class="row-fluid" id="calendar">
			    		
			    	</div>
			    	<div id="btnDiv" style="display: none;">
				    	<div class="row-fluid text-center">
				    		<span id="sing_for_number" class="btn btn-default">签到</span>
				    	</div>
			    	</div>
			    </div>
            </div>
    </div>
</body>

调用js方法代码：

var str = calUtil.drawCal(current.getFullYear(),current.getMonth() + 1,signList);
$("#calendar").html(str);

说明：signList是后台查询的已签到的时间集合，传入到js方法中会去判断哪一天签到了，然后改变签到天的显示效果，如上图！

此签到页面同样适应手机浏览器哟！

xiaosimm

关注

7
点赞
踩
27

收藏

觉得还不错? 一键收藏
61
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫