이 글은 일일 체크인 기능을 구현하기 위한 JavaScript를 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
먼저 렌더링을 살펴보세요:
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(""); htmls.push("
"); htmls.push("
"+currentYearMonth+"
"); htmls.push(""); htmls.push(""); htmls.push("
" + myMonth[0][0] + " | "); htmls.push("" + myMonth[0][1] + " | "); htmls.push("" + myMonth[0][2] + " | "); htmls.push("" + myMonth[0][3] + " | "); htmls.push("" + myMonth[0][4] + " | "); htmls.push("" + myMonth[0][5] + " | "); htmls.push("" + myMonth[0][6] + " | "); htmls.push("
---|---|---|---|---|---|---|
" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + " | "); } else { htmls.push("" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + " | "); } } htmls.push("
페이지 효과 코드:
js 호출 메소드
var str = calUtil.drawCal(current.getFullYear(),current.getMonth() + 1,signList); $("#calendar").html(str);
설명: signList는 백그라운드에서 쿼리된 로그인 시간의 모음입니다. js 메소드에 전달되면 로그인이 이루어진 날짜가 판단됩니다. 그러면 위 그림과 같이 로그인 날짜의 표시 효과가 변경됩니다!
이 체크인 페이지는 모바일 브라우저에도 적합합니다!
요약:
이 글에서는 JavaScript 달력을 구현하는 가장 간단한 방법을 사용하여 현재 시간 환경에서 이번 달의 달력을 작성하는 것을 예로 들어 실용성이 가장 중요하다는 점을 보여주고자 합니다. JS 세계에서는 문제 해결을 위한 아이디어가 최우선입니다.
웹페이지의 달력은 일반적으로 테이블과 분리될 수 없습니다. 테이블은 일반적으로 특정 달의 날짜와 같은 정보를 로드하는 데 사용됩니다. 따라서 JS 달력을 작성하기 위해 가장 먼저 해결해야 할 문제는 테이블의 행과 열이다. 일주일은 7일이므로 열은 7개로 고정되어 있습니다. 매월 첫째 날이 속하는 요일이 변수이기 때문에 행을 동적으로 계산해야 하며, 이에 따라 첫째 날 테이블의 셀 수도 그에 따라 변경됩니다. 매월 총 일수는 매월 필요한 테이블 행 수에도 영향을 미칩니다.
1. 테이블의 행 수 문제
1 먼저 처리 월의 총 일수를 구합니다.
JS 이 매개변수를 제공하지 않으므로 계산해야 합니다. 윤년 문제가 2월의 일수에 영향을 미칠 것이라는 점을 고려하여 먼저 윤년을 결정하기 위해 자체 작성 함수를 작성합니다.
function is_leap(year) { return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0)); }
그런 다음 2월의 총 일수를 포함하는 배열을 정의합니다. 12개월을 포함한 월: # #
m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);
n1str=new Date(2008,3,1); firstday=n1str.getDay();
tr_str=Math.ceil((m_days[mnow] + firstday)/7);
for(i=0;i"); for(k=0;k<7;k++) { //内层for语句 - td标签 idx=i*7+k; //表格单元的自然序号 date_str=idx-firstday+1; //计算日期 //这里是处理有效日期代码 } //内层for语句结束 document.write(""); } //外层for语句结束
function is_leap(year) { return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0)); } //是否为闰年var nstr=new Date(); //当前Date资讯var ynow=nstr.getFullYear(); //年份var mnow=nstr.getMonth(); //月份var dnow=nstr.getDate(); //今日日期var n1str=new Date(ynow,mnow,1); //当月第一天Date资讯var firstday=n1str.getDay(); //当月第一天星期几var m_days=new Array(31,28+is_leap(ynow),31,30,31,30,31,31,30,31,30,31); //各月份的总天数var tr_str=Math.ceil((m_days[mnow] + firstday)/7); //表格所需要行数//打印表格第一行(有星期标志)document.write ("
日 | 一 | 二 | 三 | 四 | 五 | 六 | " + date_str + " | ") : document.write ("" + date_str + " | "); } document.write(""); //表格的行结束} document.write("
JavaScript 비디오 튜토리얼을 방문하세요!
관련 추천: JavaScript 온라인 매뉴얼위 내용은 JavaScript로 일일 체크인 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!