Heim > Artikel > Web-Frontend > JavaScript implementiert die tägliche Check-in-Funktion

JavaScript implementiert die tägliche Check-in-Funktion

青灯夜游nach vorne: 2018-10-10 15:17:274836Durchsuche

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=&#39;sign_main&#39; id=&#39;sign_layer&#39;>");  
      htmls.push("<p class=&#39;sign_succ_calendar_title&#39;>");  
      htmls.push("<p class=&#39;calendar_month_span&#39;>"+currentYearMonth+"</p>");  
      htmls.push("</p>");  
      htmls.push("<p class=&#39;sign&#39; id=&#39;sign_cal&#39;>");  
      htmls.push("<table class=&#39;table&#39;>");  
      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=&#39;on&#39;>" + (!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(&#39;&#39;);  
    }  
};

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>");   for(k=0;k");
} //外层for语句结束</tr_str>

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 ("

");for(i=0;i"); for(k=0;km_days[mnow]) ? date_str=" " : date_str=idx-firstday+1; //过滤无效日期（小于等于零的、大于月总天数的） //打印日期：今天底色为红 date_str==dnow ? document.write ("") : document.write (""); } document.write(""); //表格的行结束} document.write("

日	一	二	三	四	五	六
" + date_str + "	" + date_str + "

"); //表格结束

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

JavaScript-Grafik-Tutorial

JavaScript Online-Handbuch

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!

php JavaScript for date math JS tr

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：JavaScript-nativer Bildwechseleffekt mit MiniaturansichtenNächster Artikel：JavaScript-nativer Bildwechseleffekt mit Miniaturansichten

In Verbindung stehende Artikel

Mehr sehen