今天分享一個日簡單歷的制作，主要講解一下jQuery方面的思路，如何實現(xiàn)一個能切換時間的日歷，樣式方面相信自己做能做的更好。
先上圖：
簡單看一下html結(jié)構(gòu)：

<div class="box"><div class="top"><div class="pre"></div><div class="next"></div><div class="time"><span id="year"></span>年<span id="month"></span>月<span id="date"></span>日</div></div><table cellspacing="10"><tr><th class="relax">日<i>休</i></th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th class="relax">六<i>休</i></th></tr></table></div>

上圖，方便理解:

　　基礎(chǔ)樣式很容易就能完成，隨便寫寫都能達到上圖效果。通過觀察html的代碼發(fā)現(xiàn)，我只給table設(shè)置一行內(nèi)容，就是日期（日，一，二…）那一行，下面的日期都是通過jquery實現(xiàn)的，ok，接下來說jquery部分。

//閏年與非閏年數(shù)組var arr1 = [31,28,31,30,31,30,31,31,30,31,30,31];var arr2 = [31,29,31,30,31,30,31,31,30,31,30,31];var date = new Date();//獲取時間對象var year = date.getFullYear();//求年份var month = date.getMonth()+1;//求月份//設(shè)置表格function setTable() {var getDate = date.getDate();//獲取當(dāng)前是本月的第幾天 用于后面設(shè)置當(dāng)天樣式var oldTime = new Date(year+'-'+month+'-01');//設(shè)置時間 var firstDay = oldTime.getDay();//求設(shè)置時間第本月第一周是第幾天var lastMonth = month-1;//上一個月 用來得出日歷第一行白色天數(shù)if(lastMonth == 0){lastMonth = 12;}var lastDay = 0;var count = 0;var arr3 = [];//此數(shù)組存儲日歷中上一個月份與下一個月份出現(xiàn)的那些天//count設(shè)值if(year % 4 == 0 && year % 100 ==0 ){count = arr1[month-1];lastDay = arr1[lastMonth-1];}else{count = arr2[month-1];lastDay = arr2[lastMonth-1];}//設(shè)置數(shù)組 按順序存儲for(var n = 0; n < firstDay; n++){arr3.unshift(lastDay);//插入元素至數(shù)組頭部 lastDay--;}var lastDay = 0;for(var m = 0; m < 42 - count - firstDay; m++){lastDay++;arr3.push(lastDay);//插入元素至數(shù)組尾部}//設(shè)置年月日$('#year').html(year);$('#month').html(month);$('#date').html(getDate);//清空表格$('tr:gt('+(0)+')').remove();var text = null;//設(shè)置表格var num = 1;for(var i = 0; i < 6; i++){//日歷一共六行 循環(huán)六次$('<tr></tr>').appendTo('table');//插入行for(var j = 0; j < 7; j++){//插入tdif(firstDay == j && i == 0){//信號量 如果第一周某一天等于之前求得的本月第一天是周幾，便從此次開始插入本月天數(shù)//插入本月天數(shù) 并設(shè)置本月天數(shù)有的className 具備樣式$('<td></td>').html(num).addClass('key').appendTo('tr:eq('+(i+1)+')').click(function (){$('td').removeClass('active');$(this).addClass('active');text = $(this).html();$('#date').html(text);});//設(shè)置當(dāng)天的樣式 如果num等于這天是本月的第多少天 則設(shè)置當(dāng)天樣式if(num == getDate){for (var k = 0; k < $('td').length; k++){if($('td').eq(k).html() == getDate){$('td').eq(k).addClass('active');}}}num++;}else if( num != 1 && num <= count){//信號量改變 開始插入本月天數(shù)$('<td></td>').html(num).addClass('key').appendTo('tr:eq('+(i+1)+')').click(function (){$('td').removeClass('active');$(this).addClass('active');text = $(this).html();$('#date').html(text);});//設(shè)置當(dāng)天的樣式if(num == getDate){for (var k = 0; k < $('td').length; k++){if($('td').eq(k).html() == getDate){$('td').eq(k).addClass('active');}}}num++;}else{//插入元素并設(shè)置上一個月與下一個月的樣式$('<td></td>').html(arr3[0]).addClass('last').appendTo('tr:eq('+(i+1)+')');//插入玩刪除數(shù)組中第一個元素arr3.shift();}}}};setTable();//上一個月$('.pre').click(function () {month--;if(month == 0){month = 12;year--;}setTable();}).mousedown(function () {$(this).css({opacity : 1,});}).mouseup(function () {$(this).css({opacity: 0.4,});});//下一個月$('.next').click(function () {month++;if(month == 13){month = 1;year++;}setTable();}).mousedown(function () {$(this).css({opacity : 1,});}).mouseup(function () {$(this).css({opacity: 0.4,});});

關(guān)鍵思想就是求出當(dāng)前月份第一天在那個（一定是第一個）星期是第幾天，知道月份就知道了有多少天，例如當(dāng)前月份第一天在第一個星期是第2天，那么for循環(huán)當(dāng)外層循環(huán) i=0 && 里層循環(huán) j=1時，開始插入淺藍色樣式的td標簽。上一個月與下一個月的點擊事件也不過是重復(fù)這個過程，并不難懂。
　　代碼有點多，看起來可能有點亂，深藍色的是當(dāng)天樣式，淺藍色的是本月天的樣式，淺白色就是上一個月與下一個月的樣式，無非就是背景色，透明度的變化，很容易設(shè)置。每次調(diào)用中間刪除行很關(guān)鍵，不然table中的行就越來越多了。本人小白，有問題可以指出，歡迎評論。

總結(jié)

以上是生活随笔為你收集整理的简单日历的制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。