jquery完成一個日曆demo練習總結
阿新 • • 發佈:2019-02-01
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 = " ": 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.
- 呼叫日曆函式,載入改變後的年份和月份.
原文連結