Maison > Article > interface Web > JavaScript implémente la fonction d'enregistrement quotidien
Cet article présente JavaScript pour implémenter la fonction d'enregistrement quotidien. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Jetons d'abord un coup d'œil aux rendus :
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('');
}
};Code d'effet de page :
<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>méthode d'appel js
var str = calUtil.drawCal(current.getFullYear(),current.getMonth() + 1,signList);
$("#calendar").html(str);
Explication : signList est une collection d'heures de connexion interrogées en arrière-plan. Lorsqu'elle est transmise à la méthode js, il sera jugé le jour de la connexion, puis l'effet d'affichage. du jour de connexion sera modifié, comme le montre l'image ci-dessus !
Cette page d'enregistrement convient également aux navigateurs mobiles !
Résumé :
Cet article prend comme exemple l'écriture du calendrier du mois en cours dans l'environnement horaire actuel, en utilisant la méthode la plus simple pour implémenter un calendrier JavaScript, dans le but de démontrer des solutions pratiques et simples aux problèmes dans les idées du monde JS.
Les calendriers des pages Web sont généralement indissociables des tableaux. Les tableaux sont généralement utilisés pour charger des informations telles que les dates de mois spécifiés. Par conséquent, pour écrire un calendrier JS, le premier problème à résoudre concerne les lignes et les colonnes du tableau. Les colonnes sont fixes, sept colonnes, car il y a sept jours dans une semaine. Les lignes doivent être calculées de manière dynamique, car le jour de la semaine où tombe le premier jour de chaque mois est une variable, donc le nombre de cellules dans le tableau pour le premier jour change également en conséquence. le nombre total de jours de chaque mois affecte également le nombre requis de lignes de tableau pour chaque mois.
1. Problème avec le nombre de lignes dans le tableau
1. Obtenez d'abord le nombre total de jours dans le mois de traitement
JS ne fournit pas ce paramètre, nous il faut le calculer. Considérant que le problème des années bissextiles affectera le nombre de jours en février, nous écrivons d'abord une fonction auto-écrite pour déterminer l'année bissextile :
function is_leap(year) {
return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}
Définissons ensuite un tableau contenant le nombre total de jours dans le mois incluant douze mois :
m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);
Dans le tableau m_days, le nombre de jours de février a été ajouté à l'information de l'année bissextile : 28+is_leap(ynow). Les éléments du tableau commencent à 0, ce qui correspond à la valeur de retour getMonth fournie par la fonction Date fournie par JS, c'est-à-dire que 0 représente janvier, 1 représente février, 2 représente mars, et ainsi de suite.
De cette manière, le nombre total de chaque mois peut être obtenu comme suit : m_days[x]. Parmi eux, x est un nombre naturel de 0 à 11.
2. Calculez le jour de la semaine correspondant au premier jour du mois
peut être obtenu en utilisant la fonction getDay de la date. La valeur renvoyée est de 0 à 6, 0 signifie. Lundi, 1 signifie mardi, et 2 signifie mercredi et ainsi de suite pour le reste. Le code est le suivant (en supposant que l'heure à traiter est mars 2008) :
n1str=new Date(2008,3,1); firstday=n1str.getDay();
Avec les deux conditions connues du nombre total de jours dans le mois et du jour de la semaine où le est le premier jour du mois, nous pouvons résoudre le problème du tableau Nombre de lignes requises : (nombre de jours dans le mois en cours + le jour de la semaine où est le premier jour) divisé par sept. La fonction table nécessite des entiers, nous utilisons donc Math.ceil pour la traiter :
tr_str=Math.ceil((m_days[mnow] + firstday)/7);
La balise tr dans le tableau représente en fait les lignes du tableau, donc la variable tr_str est une base importante pour nous écrivez le tableau.
2. L'impression du tableau du calendrier
peut être obtenue en imbriquant deux instructions for : l'instruction for externe écrit des lignes et l'instruction for interne écrit des cellules.
for(i=0;i<tr_str>"); for(k=0;k"); } //外层for语句结束</tr_str>
Que le numéro de série naturel de la cellule représente une date valide est très critique. Pour cette raison, un mécanisme de filtrage doit être ajouté : seules les dates valides sont imprimées. Les dates valides sont supérieures à 0 et inférieures ou égales au nombre total de jours traités dans le mois.
3. Voici le code complet du calendrier 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("
Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !
Recommandations associées :
Tutoriel vidéo de formation sur le bien-être public php
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!