DIV CSS 佈局教程網

 　黑色風格的JS日歷代碼，通過左右箭頭可翻頁至某年、某月，從外觀上來說與灰色的背景搭配得完美，國外網站搞的，界面語言是英文的，如果您打算用可以自己修改為中文哦，別告訴我你連12月和7個星期的英語單詞也不會哦！

　　示例：

<title>經典的JS日歷</title>

<STYLE>

body { background-color:#202020;}

td { font-family:Tahoma;font-size:11px;}

.calendarTable { background-color:#494949;}

.calendarNav { background-color:#000000;color:white;text-align:center;height:18px;}

.calendarNavEnglish { color:white;text-align:center;}

.calendarNavBar { font-size:10px;cursor:hand;color:#A5BEA5;}

.calendarHeadTR { background-color:#494949;text-align:center;color:#B9B9B9;height:17px;}

.calendarHeadTR td { width:28px;}

.calendarMainTR { background-color:#333333;text-align:center;color:#B9B9B9;height:17px;}

.calendarMainTR td { width:28px;}

.calendarToday { background-color: #636563;color:#FFFF00;width:90%;height:90%;font-weight:bolder;}

</STYLE>

<SCRIPT LANGUAGE="JavaScript" DEFER>

Date.prototype.getLastDay = function(year,month) {

if(arguments.length==2)

return(new Date(year,month+1,0).getDate())

else

with(new Date())return(new Date(getYear(),getMonth(),0).getDate())

}

Date.prototype.FirstDayofWeek = function(year,month) {

if(arguments.length==2)

return(new Date(year,month,1).getDay())

else

with(new Date())return(new Date(getYear(),getMonth(),1).getDay());

}

//Call

calendar(new Date().getYear(),new Date().getMonth(),new Date().getDate())

function calendar(userY,userM,userD) {

//system variable

var i,j;

var now = new Date(userY,userM,userD);

var Year = now.getYear();

var Month = now.getMonth()+1;

var LastDay = now.getLastDay(userY,userM);

var FirstDayofWeek = now.FirstDayofWeek(userY,userM);

var Today = now.getDate();

var MonthName = ["January","February","March","April","May","June","July","August","September","October","November","December"]

var WeekName = ["Sun","Mon","Tur","Wed","Thu","Fri","Sat"]

//user variable

var firstDayInWeek=7

var calendarRows = 7,calendarCols=7;

//user color

var tableCellpadding=1,tableCellspacing=1,tableBorder=0;

//append to where

oWhere = document.body;

//Create Table

var calendarTable = document.createElement("table");

//創建導航

var calendarNavTR = calendarTable.insertRow();

var calendarNavTD = calendarNavTR.insertCell();

//嵌套表格

var NavInnerTable = document.createElement("table")

var NavInnerTR = NavInnerTable.insertRow();

for (var i=0;i<3;i++)NavInnerTR.insertCell();

var NavSpanpY = document.createElement("<span>");

var NavSpanpM = document.createElement("<span>");

var NavSpannY = document.createElement("<span>");

var NavSpannM = document.createElement("<span>");

with(NavInnerTR.cells) {

item([0]).appendChild(NavSpanpY);

item([0]).appendChild(NavSpanpM);

item([2]).appendChild(NavSpannM);

item([2]).appendChild(NavSpannY);

//顯示英文提示

item([1]).innerText = MonthName[Month-1]+" "+Year;

item([1]).width = "100%";

item([1]).className = "calendarNavEnglish";

//

item([0]).className = "calendarNavBar";

item([2]).className = "calendarNavBar";

}

calendarNavTD.appendChild(NavInnerTable);

//創建日歷頭部分

var calendarMainTR = new Array();

for (i=0;i<calendarRows;i++) {

calendarMainTR[i] = calendarTable.insertRow();

for (j=0;j<calendarCols;j++)calendarMainTR[i].insertCell();

}

//表格屬性

with(calendarTable) {

cellPadding=tableCellpadding;

cellSpacing=tableCellspacing;

border=tableBorder;

className="calendarTable";

}

//導航內容

with(NavSpanpY) {

innerHTML = "<<"

onclick = function() {deleteCalendar();calendar(Year-1,Month-1,new Date().getDate())}

}

with(NavSpanpM) {

innerHTML = " <"

onclick = function() {deleteCalendar();calendar(Year,Month-2,new Date().getDate())}

}

with(calendarNavTD) {

colSpan = 7;

className = "calendarNav";

}

with(NavSpannM) {

innerHTML = "> "

onclick = function() {deleteCalendar();calendar(Year,Month,new Date().getDate())}

}

with(NavSpannY) {

innerHTML = ">>"

onclick = function() {deleteCalendar();calendar(Year+1,Month-1,new Date().getDate())}

}

//日歷頭

var calendarHeadTR = calendarMainTR[0];

with(calendarHeadTR) {

for (i=0;i<cells.length;i++)cells[i].innerText=WeekName[i];

className="calendarHeadTR";

}

//日歷主體

var k=1;

for (i=1;i<calendarMainTR.length;i++) {

calendarMainTR[i].className="calendarMainTR";

for(j=0;j<calendarMainTR[i].cells.length;j++) {

if (i==1&&j==FirstDayofWeek) {

CreateDay();

k++;

} else if (k>1&&k<=LastDay) {

CreateDay();

k++;

}

}

}

deleteNoneRow();

oWhere.appendChild(calendarTable);

/*Function*/

//日歷日期

function CreateDay() {

if (k==Today) {

var todaySpan = document.createElement("span");

todaySpan.className = "calendarToday";

todaySpan.innerText = k;

calendarMainTR[i].cells[j].appendChild(todaySpan);

} else {

calendarMainTR[i].cells[j].innerText=k;

}

}

//刪除空行

function deleteNoneRow() {

if(!calendarTable.rows[6].innerText)calendarTable.deleteRow(6);

if(!calendarTable.rows[7].innerText)calendarTable.deleteRow(7);

}

//從頁面裡移除日歷

function deleteCalendar() {

if(calendarTable)calendarTable.outerHTML="";

}

}

</SCRIPT> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>