1. 程式人生 > >jquery完成一個日曆demo練習總結

jquery完成一個日曆demo練習總結


jquery草草基本看完,今天在前端網看到一個jquery完成的日曆demo就模仿著寫了一下,當然問題還是很多.
這裡寫圖片描述

演算法描述
 - 建立當前月份,年份函式並且返回直.
 - 建立日曆函式,並且給出年份,月份兩個變數.
 - 獲取所要顯示月份,年份函式,並返回直.
 - 頁面載入時添加當前年份和月份

建立日曆函式演算法

 1. 首先用.appendTo()方法將日曆頁面元素置入.$("所需要放入元素的class名(ID名什麼均可)"),採用jQuery選擇器方式.

 2. 獲取當月的第一天.
     var n1time = new Date(nowy, nowm, 1
); 3.獲取當月第一天的星期. var firstday = n1time.getDay(); 4.建立月份的天數陣列 (在這之前必須判斷是否閏年 function isleapyear(year) { return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0) : res = (year % 4 == 0 ? 1 : 0));};) *建立月份天數陣列*  var month_dnarr = [31, 28 + isleapyear(nowy), 31, 30, 31, 30, 31
, 31, 30, 31, 30, 31]; 5.獲取當月所需的行數  var tr_num = Math.ceil((month_dnarr[nowm] + firstday) / 7); 6.迴圈行數 7.迴圈單元格 for (i = 0; i < tr_num; i++) {//迴圈行數 var $hxcrltr = "<tr class='hxcrltr" + i + "'></tr>"; $($hxcrltr).appendTo($myrqtable); for (k = 0; k < 7
; k++) {//迴圈單元格 tdnum = i * 7 + k; date_str = tdnum - firstday + 1; (date_str <= 0 || date_str > month_dnarr[nowm]) ? date_str = "&nbsp;": date_str = tdnum - firstday + 1; date_str == nowd ? ($hxcrltd = "<td bgcolor='#6F524A' style='color:white'>" + date_str + "</td>") : ($hxcrltd = "<td>" + date_str + "</td>");//判斷是否為當天,並高亮顯示,如修改可直接修改td內聯樣式即可 $($hxcrltd).appendTo($(".hxcrltr" + i)); 8.遍歷該table中全部td,當月所有已過日期,灰色顯示    $(".hxcrltable tr:not(:lt(2)) td").each(function() {    if (date_str < nowd) {    $(this).css("color", "#CCCCCC");}; });

在獲取的顯示月份年份中

 1. 點選月份減按鈕,月份遞減,遇到1月自動載入到前一年的12月.
     - 動態獲取當前所示的月份,減去1.
     - 動態獲取當前所示的年份.
     - 判斷月份是否大於0,如果大於0,自減1,如果不是,則將其月份變為11,年份自減1.
     - 呼叫日曆函式,載入改變後的年份和月份.

 2.點選月份增加按鈕,月份增加到12月自動載入到下一年的1月.
     - 動態獲取到當前所示的月份,並且減去1,我們的月份是從0開始計算.
     - 動態獲取到當年所示的年份
     - 判斷當前所示月份是否小於11,如果小於11,自增1;如果大於11,我們的年份自增1,並且月份變為0.
     - 呼叫日曆函式,載入改變後的年份和月份.

多半採用原作者,我只能算是整理
原文連結