JavaScript로 일일 체크인 기능 구현
- 青灯夜游앞으로
- 2018-10-10 15:17:274836검색
이 글은 일일 체크인 기능을 구현하기 위한 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("<p class='sign_main' id='sign_layer'>");
htmls.push("<p class='sign_succ_calendar_title'>");
htmls.push("<p class='calendar_month_span'>"+currentYearMonth+"</p>");
htmls.push("</p>");
htmls.push("<p 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("</p>");
htmls.push("</p>");
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;">
<p class="rich_media">
<p id="page-content">
<p 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 }" />
</p>
<p class="container-fluid">
<p class="row-fluid" id="calendar">
</p>
<p id="btnp" style="display: none;">
<p class="row-fluid text-center">
<span id="sing_for_number" class="btn btn-default">签到</span>
</p>
</p>
</p>
</p>
</p> </body>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);m_days 이 배열에서는 2월의 일수가 윤년 정보에 추가되었습니다: 28+is_leap(ynow). 배열 요소는 JS에서 제공하는 Date 함수에서 제공하는 getMonth 반환 값에 해당하는 0부터 시작합니다. 즉, 0은 1월을 나타내고, 1은 2월을 나타내고, 2는 3월을 나타냅니다. 이런 식으로 매월 총 개수는 다음과 같이 구할 수 있습니다: m_days[x]. 그 중 x는 0부터 11까지의 자연수이다. 2. 달의 첫날이 되는 요일을 계산합니다. 은 Date 함수의 getDay를 사용하여 얻을 수 있습니다. 0~6, 0은 월요일, 1은 월요일, 화요일, 2는 수요일 등을 의미합니다. 코드는 다음과 같습니다(처리 시점이 2008년 3월이라고 가정):
n1str=new Date(2008,3,1); firstday=n1str.getDay();월의 총 일수와 첫 번째 요일의 두 가지 알려진 조건 필요한 행 수: (현재 달의 일수 + 첫 번째 날의 요일)를 7로 나눈 테이블을 풀 수 있습니다. 테이블 함수에는 정수가 필요하므로 Math.ceil을 사용하여 이를 처리합니다.
tr_str=Math.ceil((m_days[mnow] + firstday)/7);테이블의 tr 태그는 실제로 테이블의 행을 나타내므로 변수 tr_str은 다음을 수행하는 데 중요한 기반입니다. 테이블을 적어보세요. 2. 달력 표 인쇄 는 두 개의 for 문을 중첩하여 수행할 수 있습니다. 외부 for 문은 행을 쓰고 내부 for 문은 셀을 씁니다.
for(i=0;i<tr_str>"); for(k=0;k"); } //外层for语句结束</tr_str>셀의 자연 일련 번호가 유효한 날짜를 나타내는지 여부는 매우 중요합니다. 이러한 이유로 필터링 메커니즘을 추가해야 합니다. 유효한 날짜만 인쇄됩니다. 유효한 날짜는 0보다 크고 처리할 달의 총 일수보다 작거나 같습니다. 3 다음은 전체 JS 캘린더 코드입니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제