JavaScript implementiert die tägliche Check-in-Funktion
Dieser Artikel stellt JavaScript zur Implementierung der täglichen Check-in-Funktion vor. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.
Werfen wir zunächst einen Blick auf die Renderings:
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(''); } };
Seiteneffektcode:
<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-Aufrufmethode
var str = calUtil.drawCal(current.getFullYear(),current.getMonth() + 1,signList); $("#calendar").html(str);
Anweisungen: signList ist eine Sammlung von Anmeldezeiten, die im Hintergrund abgefragt werden. Bei Übergabe an die js-Methode wird beurteilt, an welchem Tag die Anmeldung erfolgt ist, und dann wird der Anzeigeeffekt des Anmeldetages ermittelt wird geändert, wie im Bild oben gezeigt!
Diese Check-in-Seite ist auch für mobile Browser geeignet!
Zusammenfassung:
In diesem Artikel wird als Beispiel das Schreiben des Kalenders des aktuellen Monats in der aktuellen Zeitumgebung verwendet. Dabei wird die einfachste Methode zur Implementierung eines JavaScript-Kalenders verwendet, um praktische und einfache Lösungen im JS zu demonstrieren Welt. Ideen.
Kalender auf Webseiten sind im Allgemeinen untrennbar mit Tabellen verbunden, und Tabellen werden normalerweise zum Laden von Informationen wie Daten bestimmter Monate verwendet. Um einen JS-Kalender zu schreiben, müssen daher zunächst die Zeilen und Spalten der Tabelle gelöst werden. Die Spalten sind fest, sieben Spalten, da eine Woche sieben Tage hat. Die Zeilen müssen dynamisch berechnet werden, da der Wochentag, auf den der erste Tag eines jeden Monats fällt, eine Variable ist und sich daher auch die Anzahl der Zellen in der Tabelle am ersten Tag entsprechend ändert. Gleichzeitig besteht die Inkonsistenz Die Gesamtzahl der Tage in jedem Monat wirkt sich auch auf die erforderliche Anzahl von Tabellenzeilen in jedem Monat aus.
1. Problem mit der Anzahl der Zeilen in der Tabelle
1. Ermitteln Sie zunächst die Gesamtzahl der Tage im Verarbeitungsmonat
JS stellt diesen Parameter nicht zur Verfügung muss es berechnen. Da sich das Schaltjahrproblem auf die Anzahl der Tage im Februar auswirkt, schreiben wir zunächst eine selbstgeschriebene Funktion zur Bestimmung des Schaltjahres:
function is_leap(year) { return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0)); }
Dann definieren wir ein Array, das die Gesamtzahl der Tage im Monat einschließlich enthält zwölf Monate:
m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);
Im Array m_days wurde die Anzahl der Tage im Februar zu den Schaltjahrinformationen hinzugefügt: 28+is_leap(ynow). Die Array-Elemente beginnen bei 0, was dem von der von JS bereitgestellten Date-Funktion bereitgestellten getMonth-Rückgabewert entspricht, d. h. 0 steht für Januar, 1 steht für Februar, 2 steht für März und so weiter.
Auf diese Weise kann die Gesamtzahl jedes Monats wie folgt ermittelt werden: m_days[x]. Unter diesen ist x eine natürliche Zahl von 0 bis 11.
2. Berechnen Sie den Wochentag, an dem der erste Tag des Monats liegt.
kann mithilfe der Funktion „getDay of the Date“ ermittelt werden bedeutet Montag, 1 bedeutet Dienstag und 2 bedeutet Mittwoch und so weiter. Der Code lautet wie folgt (unter der Annahme, dass die zu verarbeitende Zeit März 2008 ist):
n1str=new Date(2008,3,1); firstday=n1str.getDay();
Mit den beiden bekannten Bedingungen der Gesamtzahl der Tage im Monat und dem Wochentag, an dem der erste Tag liegt des Monats ist, können Sie die erforderlichen Zeilen der Tabelle lösen. Zählproblem: (Anzahl der Tage im aktuellen Monat + Wert des Wochentags, den der erste Tag hat) geteilt durch sieben. Die Tabellenfunktion erfordert Ganzzahlen, daher verwenden wir Math.ceil zur Verarbeitung:
tr_str=Math.ceil((m_days[mnow] + firstday)/7);
Das tr-Tag in der Tabelle repräsentiert tatsächlich die Zeilen der Tabelle, daher ist die Variable tr_str eine wichtige Grundlage für uns zum Aufschreiben der Tisch.
2. Das Drucken der Kalendertabelle
kann durch Verschachteln von zwei for-Anweisungen erreicht werden: Die äußere for-Anweisung schreibt Zeilen und die innere for-Anweisung schreibt Zellen.
for(i=0;i<tr_str;i++) { //外层for语句 - tr标签 document.write("<tr>"); for(k=0;k<7;k++) { //内层for语句 - td标签 idx=i*7+k; //表格单元的自然序号 date_str=idx-firstday+1; //计算日期 //这里是处理有效日期代码 } //内层for语句结束 document.write("</tr>"); } //外层for语句结束
Ob die natürliche Seriennummer der Zelle ein gültiges Datum darstellt, ist sehr wichtig. Aus diesem Grund muss ein Filtermechanismus hinzugefügt werden: Es werden nur gültige Daten gedruckt. Gültige Daten sind größer als 0 und kleiner oder gleich der Gesamtzahl der Tage im zu verarbeitenden Monat.
3. Das Folgende ist der vollständige JS-Kalendercode:
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 ("<table border='1' align='center' width='220' cellspacing='0'><tr><td align='center'>日</td><td align='center'>一</td><td align='center'>二</td><td align='center'>三</td><td align='center'>四</td><td align='center'>五</td><td align='center'>六</td></tr>");for(i=0;i<tr_str;i++) { //表格的行 document.write("<tr>"); for(k=0;k<7;k++) { //表格每行的单元格 idx=i*7+k; //单元格自然序列号 date_str=idx-firstday+1; //计算日期 (date_str<=0 || date_str>m_days[mnow]) ? date_str=" " : date_str=idx-firstday+1; //过滤无效日期(小于等于零的、大于月总天数的) //打印日期:今天底色为红 date_str==dnow ? document.write ("<td align='center' bgcolor='red'>" + date_str + "</td>") : document.write ("<td align='center'>" + date_str + "</td>"); } document.write("</tr>"); //表格的行结束} document.write("</table>"); //表格结束
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!
Verwandte Empfehlungen:
PHP-Video-Tutorial zum Gemeinwohltraining
Das obige ist der detaillierte Inhalt vonJavaScript implementiert die tägliche Check-in-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).

JavaScript ist eine in der Webentwicklung weit verbreitete Programmiersprache, während WebSocket ein Netzwerkprotokoll für die Echtzeitkommunikation ist. Durch die Kombination der leistungsstarken Funktionen beider können wir ein effizientes Echtzeit-Bildverarbeitungssystem erstellen. In diesem Artikel wird erläutert, wie dieses System mithilfe von JavaScript und WebSocket implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. Zunächst müssen wir die Anforderungen und Ziele des Echtzeit-Bildverarbeitungssystems klären. Angenommen, wir haben ein Kameragerät, das Bilddaten in Echtzeit sammeln kann
