js实现每日签到功能

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

不废话，先看效果！

核心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方法中会去判断哪一天签到了，然后改变签到天的显示效果，如上图！

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

js实现每日签到功能相关推荐

js php 实现日历签到_js实现每日签到功能
本文实例为大家分享了js实现每日签到功能的具体代码,供大家参考,具体内容如下 js: var calUtil = { getDaysInmonth : function(iMonth, iYear){ ...
每日签到功能怎么实现的？
关于网友提出的" 每日签到功能怎么实现的?"问题疑问,本网通过在网上对" 每日签到功能怎么实现的?"有关的相关答案进行了整理,供用户进行参考,详细问题解答如下: ...
基于jQuery的日历+每日签到功能
公司要开发一个h5页面,里边有一个每日签到抽奖的功能,本以为这样的插件应该会有很多,结果找到的全都是仅生成日历的插件,于是乎就出现了下面这个东西.(前端菜鸟,请大神嘴下留情,也请小伙伴们多提宝贵意见) ...
html+css+JavaScript实现每日签到功能
用户每日签到主要在于实现点击-签到-显示即时时间本次使用的是原生js实现签到功能,绑定签到按钮点击需要显示的内容,获取网络时间,获取年月日,再对文字进行拼接,最后再进行插入html中的展示内容下面 ...
每日积分返还的php代码,php实现每日签到功能
每日签到的功能,供大家参考,具体内容如下首次签到获得1个积分,第二次签到获得2个积分,第三次签到获得3个积分,以此类推但是签到必须每天连续积分才可以递增,如果有中断再次签到时获得积分仍然从1开始递增 ...
公众号签到领积分怎么做？每日签到功能上架
每日签到为公众号实现了每日积分签到的的功能,对于吸粉和留存起到了非常重要的意义. 微Sir图文助手可以实现递增签到和签到上限和自定义签到签到回复的功能. 费用:接入微Sir图文助手基础服务后免费使用 ...
java实现用户每日签到功能
java用户每日签到签到规则签到周期以周为单位(最大连续签到天数为 7 天),周一为新的签到周期,所有连续签到天数重新开始计算. 表字段以下为数据库所需的字段: 代码实现非全部的代码: /** ...
tp5实现每日签到功能
tp5每日签到设计数据库设计代码实现数据库设计要求: 每个用户可以签到7天,连续签到7天或者中途断签都重新开始计算签到天数,签到会获取对应奖励分析: 1.连续签到 2.签到7天或者断签重新开 ...
ios 每日签到功能,模拟连续签到和中断需要重新签到
闲着没事干,想到之前一个项目有个签到功能,如上图所示,所幸就写出来,难度也不大,因为没有接口,我自己写了本地数据库模拟一些连续签到和中断签到需要重新签到的功能,如果有需要的话,直接跟后台商量写成这样替 ...

js实现每日签到功能

js实现每日签到功能相关推荐

最新文章

热门文章