基于JavaScript實現(xiàn)每日簽到打卡軌跡功能
本文實例為大家分享了js實現(xiàn)每日簽到打卡軌跡功能的具體代碼,供大家參考,具體內(nèi)容如下
1. 核心文件 calendar.js
var calUtil = { //當前日歷顯示的年份 showYear:2018, //當前日歷顯示的月份 showMonth:1, //當前日歷顯示的天數(shù) 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("<div class='sign_main' id='sign_layer'>"); htmls.push("<div class='sign_succ_calendar_title'>"); htmls.push("<div class='calendar_month_span'></div>"); htmls.push("</div>"); htmls.push("<div class='sign' id='sign_cal'>"); htmls.push("<table>"); 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]); console.log(ifHasSigned); 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(''); } };
2. 頁面Js引入
<script src="jquery.min.js"></script> <script src="~calendar.js"></script>
3.0 后臺拉取會員已經(jīng)簽到的打卡軌跡,填充到表格中去。
var signList=[{"signDay":"23"},{"signDay":"24"},{"signDay":"25"},{"signDay":"26"},{"signDay":"30"}]; //填充到日歷表格中 calUtil.init(signList);
4. 效果圖
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript設(shè)計模式之緩存代理模式原理與簡單用法示例
這篇文章主要介紹了JavaScript設(shè)計模式之緩存代理模式原理與簡單用法,結(jié)合實例形式簡要分析了javascript緩存代理模式的基本原理、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2018-08-08JavaScript中Function與Object的關(guān)系
本文主要介紹了JavaScript中Function與Object的關(guān)系,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05Bootstrap開發(fā)實戰(zhàn)之第一次接觸Bootstrap
Bootstrap開發(fā)實戰(zhàn)之第一次接觸Bootstrap,想要學(xué)好一門語言,首先應(yīng)該進行深入了解,感興趣的小伙伴們可以參考一下2016-06-06詳解關(guān)于微信setData回調(diào)函數(shù)中的坑
這篇文章主要介紹了詳解關(guān)于微信setData回調(diào)函數(shù)中的坑,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02