Home > Article > Web Front-end > JavaScript implements daily check-in function
This article introduces JavaScript to implement the daily check-in function. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Let’s take a look at the renderings first:
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('');
}
};Page effect code:
<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 calling method
var str = calUtil.drawCal(current.getFullYear(),current.getMonth() + 1,signList);
$("#calendar").html(str);
Instructions : signList is a collection of signed-in times queried in the background. When passed to the js method, it will be judged on which day the sign-in was made, and then the display effect of the sign-in day will be changed, as shown in the picture above!
This check-in page is also suitable for mobile browsers!
Abstract:
This article takes writing the calendar of the current month in the current time environment as an example, using the simplest method to implement a JavaScript calendar, aiming to demonstrate practical and simple solutions in the JS world. ideas.
Calendars in Web pages are generally inseparable from tables, and tables are usually used to load information such as dates of specified months. Therefore, to write a JS calendar, the first problem that must be solved is the rows and columns of the table. The columns are fixed, seven columns, because there are seven days in a week. The rows need to be calculated dynamically, because the day of the week on which the first day of each month falls is a variable, so the number of cells in the table for the first day also changes accordingly. At the same time, the inconsistency in the total number of days in each month also affects The required number of table rows in each month.
1. Problem with the number of rows in the table
1. First get the total number of days in the processing month
JS does not provide this parameter, we need to calculate it. Considering that the leap year problem will affect the number of days in February, we first write a self-written function to determine the leap year:
function is_leap(year) {
return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}
Then define an array containing the total number of days in the month including twelve months:
m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);
In the m_days array, the number of days in February has been added to the leap year information: 28 is_leap(ynow). The array elements start from 0, which corresponds to the getMonth return value provided by the Date function provided by JS, that is, 0 represents January, 1 represents February, 2 represents March, and so on.
In this way, the total number of each month can be obtained as follows: m_days[x]. Among them, x is a natural number from 0 to 11.
2. Calculate the day of the week that the first day of the month is
You can use the getDay of the Date function to get it. The returned value is from 0 to 6, 0 means Monday, 1 means Tuesday, and 2 means Wednesday and so on for the rest. The code is as follows (assuming that the time to be processed is March 2008):
n1str=new Date(2008,3,1); firstday=n1str.getDay();
With the two known conditions of the total number of days in the month and the day of the week on which the first day of the month is, you can solve the required rows of the table Numbering problem: (The first day of the current month is the day of the week) divided by seven. The table function requires integers, so we use Math.ceil to process it:
tr_str=Math.ceil((m_days[mnow] + firstday)/7);
The tr tag in the table actually represents the rows of the table, so the variable tr_str is an important basis for us to write down the table.
2. Print calendar table
You can use two for statements to be nested: the outer for statement writes rows, and the inner for statement writes cells.
for(i=0;i<tr_str>"); for(k=0;k"); } //外层for语句结束</tr_str>
Whether the natural serial number of the cell represents a valid date is very critical. For this reason, a filtering mechanism must be added: only valid dates are printed. Valid dates are greater than 0 and less than or equal to the total number of days in the month to be processed.
3. The following is the complete JS calendar code:
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("
Summary: The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related tutorials, please visit JavaScript Video Tutorial!
Related recommendations:
php public welfare training video tutorial
The above is the detailed content of JavaScript implements daily check-in function. For more information, please follow other related articles on the PHP Chinese website!