这篇文章给大家分享的是有关基于JavaScript如何实现每日签到打卡轨迹功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联是一家专业提供镇雄企业网站建设,专注与成都网站设计、网站建设、H5高端网站建设、小程序制作等业务。10年已为镇雄众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。具体内容如下
1. 核心文件 calendar.js
var calUtil = { //当前日历显示的年份 showYear:2018, //当前日历显示的月份 showMonth:1, //当前日历显示的天数 showDays:1, eventName:"load", //初始化日历 init:function(signList){ calUtil.setMonthAndDay(); calUtil.draw(signList); }, draw:function(signList){ //绑定日历 var str = calUtil.drawCal(calUtil.showYear,calUtil.showMonth,signList); $("#calendar").html(str); //绑定日历表头 var calendarName=calUtil.showYear+"年"+calUtil.showMonth+"月"; $(".calendar_month_span").html(calendarName); }, //获取当前选择的年月 setMonthAndDay:function(){ switch(calUtil.eventName) { case "load": var current = new Date(); calUtil.showYear=current.getFullYear(); calUtil.showMonth=current.getMonth() + 1; break; case "prev": var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0]; calUtil.showMonth=parseInt(nowMonth)-1; if(calUtil.showMonth==0) { calUtil.showMonth=12; calUtil.showYear-=1; } break; case "next": var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0]; calUtil.showMonth=parseInt(nowMonth)+1; if(calUtil.showMonth==13) { calUtil.showMonth=1; calUtil.showYear+=1; } break; } }, 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){ if(item.signDay == day) { signed = true; return false; } }); return signed ; }, drawCal : function(iYear, iMonth ,signList) { var myMonth = calUtil.bulidCal(iYear, iMonth); var htmls = new Array(); htmls.push(""); htmls.push(""); return htmls.join(''); } };"); htmls.push(""); htmls.push(""); htmls.push(""); htmls.push(""); htmls.push(""); var d, w; for (w = 1; w < 7; w++) { htmls.push("
"); htmls.push(""); for (d = 0; d < 7; d++) { var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]); console.log(ifHasSigned); if(ifHasSigned){ htmls.push(" "); } htmls.push("" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + " "); } else { htmls.push("" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + " "); } } htmls.push("
2. 页面Js引入
3.0 后台拉取会员已经签到的打卡轨迹,填充到表格中去。
var signList=[{"signDay":"23"},{"signDay":"24"},{"signDay":"25"},{"signDay":"26"},{"signDay":"30"}]; //填充到日历表格中 calUtil.init(signList);
4. 效果图
感谢各位的阅读!关于“基于JavaScript如何实现每日签到打卡轨迹功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。